56

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?

Improve this question
3
  • 6
    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. Commented Jan 4, 2019 at 6:06
  • 1
    @Vikas Singh thanks you solved my problem. please add this as answer. Commented Jan 4, 2019 at 6:17
  • 1
    stackoverflow.com/questions/63550036/…. It will give some information for loading runtime image Commented Aug 23, 2020 at 19:17

5 Answers 5

Reset to default
73

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

create-react-app.dev/docs/using-the-public-folder
Make sure you adjust the path correctly. If you have a folder called img that is in the public folder then the path would be: <img src={img/${img.code}.jpg}></img>
26

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

Improve this answer

5 Comments

require doesn't allow variables. It has to be a string literal.
@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.
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.
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.
This does not work for Vite. This page 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.
8

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} />)
Improve this answer

Comments

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} />

Improve this answer

Comments

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.