38

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?

Vinay
  • 2,034
  • 3
  • 18
  • 34
  • 6
    if you dont want to require the image then you have to put all your images into public folder and then **** this method will work. – Vikas Singh Jan 04 '19 at 06:06
  • 1
    @Vikas Singh thanks you solved my problem. please add this as answer. – Vinay Jan 04 '19 at 06:17
  • https://stackoverflow.com/questions/63550036/react-webpack-error-runtime-loading-of-image#63550336. It will give some information for loading runtime image – upog Aug 23 '20 at 19:17

5 Answers5

53

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.

Vikas Singh
  • 1,419
  • 13
  • 21
19

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

user1275105
  • 2,433
  • 4
  • 30
  • 44
  • require doesn't allow variables. It has to be a string literal. – backslashN Sep 08 '20 at 16:13
  • @backslashN this does work (at least locally), if needed you can use "./img/"+img.code+".jpg" - React will convert it to the string before importing it. – aarowman Sep 09 '20 at 18:55
  • I experienced the opposite. If the public folder missing the image there is a small icon that meaning missing the image. But if i use src/assets folder and missing the image then crash the app. – Milán Nikolics Mar 19 '22 at 19:57
4

One pretty simple solution:

// images.js

const images = [
  { id: 1, src: './assets/image01.jpg', title: 'foo', description: 'bar' },
  { id: 2, src: './assets/image02.jpg', title: 'foo', description: 'bar' },
  { id: 3, src: './assets/image03.jpg', title: 'foo', description: 'bar' },
  { id: 4, src: './assets/image04.jpg', title: 'foo', description: 'bar' },
  { id: 5, src: './assets/image05.jpg', title: 'foo', description: 'bar' },
  ...etc
];
export default images;

You can then import it form another component like this:

// MyComponent.js
import images from './images'

//...snip

{ images.map(({id, src, title, description}) => <img key={id} src={src} title={title} alt={description} />)
Blessing
  • 1,800
  • 10
  • 15
1

Dynamic require doesn't seems to be clean and also eslint isn't happy with it (not sure why)

Other two approaches if images are stored in public folder :

const imgNameWithPath = '/fullImageNameWithPath.jpg'

  1. Using env <img src={process.env.PUBLIC_URL + imgNameWithPath} />

  2. Using location origin: <img src={window.location.origin + imgNameWithPath} />

Priyanshu Chauhan
  • 4,899
  • 3
  • 33
  • 34
-1

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..

Karthick Ravi
  • 1
  • 1