Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Problema no Encoding

No meu projeto, o endereço da imagem está aparecendo assim: Ao invés de "endereço", o Ç está com caractere especial

Teria alguma forma simples de modificar isso? Ou ainda será explorado no curso?

2 respostas

Boa tarde, Emanuele!

Realmente parece ser um problema de encoding, o que é estranho pois o create-react-app já fornece toda meta estrutura padrão de uma página HTML, você pode verificar isto em public/index.html, neste arquivo há o template html:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/react.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Por curiosidade perceba que neste arquivo há uma div com o id 'root', é através desta div que o React renderiza os componentes de forma dinâmica, por isto aplicações React são comumente chamadas de Single Page Applications, pois você pode criar diversas funcionalidades com somente uma única página html, e assim quando você troca de rotas sua página também não dá nenhum recarregamento, pois na verdade você não troca o arquivo html.

Verifique este arquivo para ver se realmente está configurado de forma correta, como o atributo lang da tag html, você pode alterar para pt-br, e principalmente se o atributo charset da tag meta está realmente definido como UTF-8. Você também pode definir o encoding no arquivo CSS global:

@charset "UTF-8"; 

E por fim, caso esteja utilizando uma fonte externa, a mesma deverá ser importada ou no arquivo HTML, ou via CSS (não sei se esse é o caso), nunca tive problemas com encoding, então até onde eu sei o que pode gerar estes problemas são as metatags e importações (principalmente a falta delas), pode ser até uma configuração maluca do navegador.

solução!

Oi, Gabriel! Obrigada pelo retorno!

Tentei fazer o que você recomendou e continuou dando erro, não estava usando nenhuma fonte externa e testei em dois navegadores diferentes.

Fuçando um pouco mais, descobri que o problema estava na IDE: uso o PHPStorm, e no fim o arquivo em si estava com a configuração errada... Mudei nos settings e agora tudo certo.

Valeu!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software