Display images in React using JSX without import

问题:

The problem i face is with img tag. When a single is concerned, The below code loads the image:

import image1 from './images/image1.jpg; <img src={image1} /> 

But the below code doesn't load:

 <img src={'./images/image1.jpg'}/>             or   <img src='./images/image1.jpg'/> 

I need to loop through json , something like [{'img':'./images/image1.jpg','name':'AAA'},{'img':'./images/image2.jpg','name':'BBB'}] and display each of them as image with name as footer. Looping is fine but images doesn't load.It is not actually possible for myself to import every images to add. I don't use anything other than JSX as of now.Please favour.

回答1:

You need to require the file like so:

<img src={ require('./images/image1.jpg') } /> 

回答2:

require is used for static "imports", so you just need to change your imports.

Example:

var imageName = require('./images/image1.jpg') <img src={imageName} /> 

文章来源: Display images in React using JSX without import