How to give Image src dynamically in react js?

问题

I am trying to give image name in src dynamically. I want to set image name dynamically using variable with path. but I am not able to set src correctly. I tried solutions on stackoverflow but nothing is working.

I tried to give path like this

<img src={`../img/${img.code}.jpg`}></img>

<img src={'../img/' + img.code + '.jpg'}></img>

<img src={'../img/{img.code}.jpg'}></img>

my images are saved in src/img path if i give path like this

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

image is showing

I know this question is asked before but nothing is working for me. Please help me how can I set image path?

回答1:

if you dont want to require the image then you have to put all your images into public folder and then

<img src={`../img/${img.code}.jpg`}></img>

this method will work.

回答2:

You can still use require

<img src={require(`./img/${img.code}.jpg`)}/>

It's not recommended to manually add images to the public folder. See this answer here: https://stackoverflow.com/a/44158919/1275105

回答3:

If you guys get the path from the database for multiple images and need to use in single tag, you can follow the below method. step 1 : Please make sure the images are in public folder. step 2 : Update your path should start from public not from src. step 3 : Make sure to verify that the path should be using like a variable. If your images path should be using in variable imgPath. You can use your code like var imgPath = '/img/pic.jpeg' "src={imgPath}"

I hope this will help you..

来源：https://stackoverflow.com/questions/54033765/how-to-give-image-src-dynamically-in-react-js