0

Boa noite tenho um arquivo js com um array de objetos e uma dessas propriedades é imagem como eu faço para renderiza-la no src já tentei {item.image} mas é só uma string e o react aparentemente usa imagens como se fossem componentes, outro detalhe é que a propriedade de imagem desses objetos recebe uma string que é a localização dessas imagens ../assets/imagemTal.png, ele não renderiza de jeito nenhum ou busca pelo menos

2 Respostas 2

0

Gabriel, no React essas imagens locais precisam ser importadas. Você pode fazer um require dentro do componente img ou do seu array. Veja o que for mais fácil. Eu fiz aqui um componente bem rapidinho e deu certo, veja:

return (
    <div className="App">
      {images.map(item => (
        <div key={item.id}>
          <img src={require(`${item.image}`)} alt="imagem" />
        </div>
      ))}
    </div>

o meu array estava assim:

const images = [
  {
    id: Math.random(),
    image: "./assets/article.full.jpg"
  },
  {
    id: Math.random(),
    image: "./assets/blue-flame-2.jpg"
  },
  {
    id: Math.random(),
    image: "./assets/energy-main-6.jpg"
  }
];
8
  • 1
    Parece que pode funcionar, obrigado Commented 23/04/2019 às 3:59
  • Você pode usar o require no array ou até mesmo importar as imagens e colocar o nome do import tipo:import { nome_que_vc_quiser } from './assets/sua_imagem.jpg'; e ai no array voce usa o nome que você colocou na imagem. Commented 23/04/2019 às 4:07
  • po não ta funcionando não, olha o que eu escrevi Commented 23/04/2019 às 4:14
  • <ul> { items.map(item => ( <li key={item.id}> <button onClick=this.handlerClick.bind(this,item)}> <div className="containerImage"> <img src={require(${item.image})} alt="teste"/> </button> </li> ))} ) </ul> Commented 23/04/2019 às 4:17
  • Manda como está seu array onde tem a imagem. Vai ficar mais fácil pra entender. Commented 23/04/2019 às 11:43
0

Segue um exemplo bastante genérico, mas que mostra que sim, é possivel sem react.

function carregarImagem() {
  var imagem = document.getElementById("imagem");
  imagem.src = "https://s2.glbimg.com/RV6Buc-U84d00Ky_aBhOiGWZeXs=/0x59:2000x1185/540x304/smart/http://i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2019/p/M/8bGAWSRuWFf6NgMwCS1w/bancoimagemfotoaudiencia-ap-408260.jpg";
}
<img id="imagem" src="" title="Clique para carregar" width="450" height="300" onclick="carregarImagem()">

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .