52

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,272
  • 4
  • 19
  • 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
  • 1
    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

71

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,791
  • 1
  • 14
  • 26
24

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,643
  • 5
  • 31
  • 45
  • require doesn't allow variables. It has to be a string literal. – backslashN Sep 08 '20 at 16:13
  • 1
    @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
  • This didn't work for me using template literals, but it did when I switched to concatenating with the addition operator. Can anyone explain why? Tried looking at the string interpolation and template literal docs but couldn't find any clues. – Cutler.Sheridan Nov 18 '22 at 20:09
  • This does not work for Vite. [This page](https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url) has multiple ways to deal with assets, of which the first one is eliminated because in my case, I have to import image dynamically. The third case (using `new URL()`) also does not work, for me. – Ashvith Shetty Feb 13 '23 at 12:26
7

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
  • 2,450
  • 15
  • 22
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
  • 5,297
  • 5
  • 35
  • 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