How to give Image src dynamically in react js?

user_9814965 0
Viewed 54771

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?

react-redux reactjs
5 Answers

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.

user_69354780
user_12751050

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

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

user_15491910

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

user_33963300
Related