3
respostas

[Dúvida] imagem no frontend não carrega como deveria

rota no backend:

router.get('/imagem/:nomeImagem', (req,res) => { try { return res.sendFile(path.join(__dirname, ../${req.params.nomeImagem})); } catch(erro) { return res.status(500).json(erro); } })

componente no frontend:

function CardJogador(props) { return( <img src={http://localhost:3000/atletas/imagem/${props.imagem}} alt={Imagem do jogador ${props.nome}} />

Nome: {props.nome}

Idade: {props.idade}

Posição: {props.posicao}

Categoria: {props.categoria}

) }

props. imagem retorna um valor tipo: uploads\1708142851285.jpeg

e ao usar a mesma url que a utilizada em src no postman (exemplo: http://localhost:3000/atletas/imagem/uploads\1708142851285.jpeg) a imagem é enviada corretamente. Mas no frontend ela não carrega, não aparece nenhum erro no console, a imagem apenas não aparece

3 respostas

Olá! Parece que você está tendo um problema com a exibição de imagens no frontend do seu aplicativo Flutter. Aqui estão algumas possíveis soluções para o seu problema:

Verifique o caminho da imagem: Certifique-se de que o caminho da imagem esteja correto e que a imagem exista nesse caminho. No seu caso, parece que você está tentando acessar a imagem através de uma URL local (http://localhost:3000/atletas/imagem/${props.imagem}). Verifique se a imagem está realmente localizada nesse caminho. Verifique as permissões de acesso à internet: Em alguns casos, o Flutter pode não carregar imagens de uma URL local devido a restrições de permissão. Você pode precisar adicionar a permissão de acesso à internet no arquivo AndroidManifest.xml que fica localizado em android/app/src/main. Adicione a seguinte linha dentro da tag :

`<uses-permission android:name="android.permission.INTERNET"/>

` Verifique o componente Image.network: Certifique-se de que você está usando corretamente o componente Image.network do Flutter. Ele deve ser capaz de carregar imagens de uma URL. Espero que isso ajude! Se você tiver mais perguntas, fique à vontade para perguntar.

  • https://pt.stackoverflow.com/questions/420269/flutter-n%c3%a3o-retorna-imagens-da-api
    
  • https://bing.com/search?q=Imagem+n%c3%a3o+carrega+no+frontend+com+rota+no+backend+no+Flutter
    
  • https://pt.stackoverflow.com/questions/440374/imagem-na-url-do-image-network-do-flutter-n%c3%a3o-funciona-no-dispositivo-f%c3%adsico
    
  • https://pt.stackoverflow.com/questions/493253/tag-img-nao-renderiza-imagem-da-pasta-local-assets
    
  • https://picsum.photos/250?image=9
    
  • http://schemas.android.com/apk/res/android
    

Não estou usando flutter. Estou usando React para o frontend e Node para o backend

Entendi, Entao verifica isto por gentileza; você está tendo um problema com a exibição de imagens no frontend do seu aplicativo usando React. Aqui estão algumas sugestões que podem ajudar:

  1. Importação de imagens: No React, as imagens devem ser ** importadas quando o arquivo for local** . Por exemplo, você pode importar uma imagem da seguinte maneira: import img from './assets/BeTheHero.png'; e, em seguida, usar essa variável no seu componente: 1. Vale lembrar que a imagem deve ficar dentro da pasta src para que isso funcione.
  2. Verifique o caminho da imagem: Certifique-se de que o caminho da imagem esteja correto e que a imagem exista nesse caminho.
  3. Verifique as permissões de acesso à internet: Seu aplicativo precisa ter as permissões necessárias para acessar e reproduzir arquivos de mídia. Verifique as configurações de permissão do seu aplicativo.
  4. Teste em diferentes dispositivos: Às vezes, um problema pode ocorrer apenas em certos dispositivos ou versões do sistema operacional. Tente testar seu jogo em diferentes dispositivos e versões do sistema operacional para ver se o problema persiste.

Espero que isso ajude! Se você tiver mais perguntas, fique à vontade para perguntar.

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