2
respostas

Importação de imagens não funciona

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Tenho tentado fazer as importações de imagens .svg e .png mas estas não funcionam de forma alguma. Já passei quase um dia todo pesquisando o que poderia ser, mas até agora só consegui contornar com algumas gambiarras.

A questão é que a aplicação parece não estar compreendendo a rota para importar as imagens, dando erro por mais que toda a estrutura esteja condizente com a arquitetura do projeto (é só ver que a rota é a mesma tanto no import quanto no require, enquanto no primeiro caso esta não funciona e no segundo, sim).

Após muita pesquisa eu vi algumas possíveis soluções, como instalar o svg-url-loader e fazer modificações no webpack.config.js, ou criar um arquivo custom.d.ts (o que não deu certo para mim), e até mesmo usar o require(), que foi a única solução que resultou em algum sucesso, por mais que tenha sido necessário adicionar aquele .default para que desse certo.

Minha única alternativa caso o require não funcionasse era a de criar um componente React cujo return() fosse o próprio código do arquivo SVG, pois assim eu poderia importar o arquivo como um componente. E no caso de imagens PNG eu não tenho outra alternativa que não adicionar diretamente dentro da pasta public.

Alguém teria alguma explicação para esse problema de importação, e se possível, alguma solução para isso?

2 respostas

Fala Lucas, beleza?

Você consegue subir o seu código para o GitHub e mandar o link aqui para que seja mais fácil de entender o seu problema?

Claro, perdão pela demora!

O repositório já está montado faz bastante tempo, e este código em questão pode ser encontrado Aqui entre as linhas 14 e 16. Vale lembrar que este problema se repetiu em todas as outras importações de imagens ao longo deste projeto, como neste arquivo entre as linhas 4 e 5.

Inclusive, eu também comecei um projeto em React Native com o ambiente usando TypeScript, e o mesmo problema apareceu, o que faz com que a IDE esteja sempre alertando para um erro de importação, por mais que a imagem seja exibida dentro do projeto.

Como eu não consegui resolver apesar de ter pesquisado bastante, apenas aprendi a conviver com as mensagens de erro, ou então usar o require mesmo quando possível.

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