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
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"
}
];
-
1
-
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 -
-
<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
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()">