how to import images from public folder in react js code example

Example 1: import all images from folder reactjs

function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  return images;
}

const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));

<img src={images['doggy.png']} />

Example 2: react src images from public folder

<img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} />

Tags:

Javascript Example

Related