Breaking News: Grepper is joining You.com. Read the official announcement!

how to import images from public folder in react js

Add Answer

mahdi mohammadi answered on November 8, 2020 Popularity 1/10 Helpfulness 1/10

answer how to import images from public folder in react js

related import an image react in the public folder

related import all images from folder reactjs

related react import all images from folder

related import an image react in the public folder

related Import all images from folder react

related react js public folder image path search

how to import images from public folder in react js

Comment

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

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

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: import javascript public

Link to this answer
Share Copy Link

Contributed on Mar 06 2022

mahdi mohammadi

0 Answers Avg Quality 2/10

Closely Related Answers

import an image react in the public folder

Comment

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

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: image imag

Link to this answer
Share Copy Link

Contributed on Jun 16 2022

Akampurira Brian David

0 Answers Avg Quality 2/10

import all images from folder reactjs

Comment

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

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: import im

Link to this answer
Share Copy Link

Contributed on Nov 08 2020

Kind Kouprey

0 Answers Avg Quality 2/10

react import all images from folder

Comment

const getImages = name => require(`../images/${name}.jpg`)

// the name of the file
getImages(name)

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: import im

Link to this answer
Share Copy Link

Contributed on Mar 16 2023

david lifshitz

0 Answers Avg Quality 2/10

import an image react in the public folder

Comment

-1

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

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: image imag

Link to this answer
Share Copy Link

Contributed on Jun 16 2022

Akampurira Brian David

0 Answers Avg Quality 2/10

Import all images from folder react

Comment

// Original answer by Kind Kouprey, additional comments and integer index alternative by me.

function importAll(r) {
  
  //// Use these line if you like to access arrays using an integer index.
  //let images = [];
  //r.keys().map((item, index) => { images.push(r(item)); });
  
  ////Use these line if you want to access each image using the file name.
  //let images = {};
  //r.keys().map((item, index) => { images[item.replace('./','')] = r(item); });
  
  return images;
}

//Param 1: The path or route to the directory you want to import.
//Param 2 (optional): Include directories?
//Param 3 (optional): Use a regular expression (regex) such as "/\.(png|jpe?g|svg)$/" to select only certain file types.
const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));

//The index can be up to the number of images in the folder - 1;
<img src={images[0]} />
<img src={images[3]} />
//Or if you used the file name method...
<img src={images["doggy.png"]} />

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: import im

Link to this answer
Share Copy Link

Contributed on Aug 01 2022

Quaint Quelea

0 Answers Avg Quality 2/10

react js public folder image path search

Comment

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: image imag

Link to this answer
Share Copy Link

Contributed on Jul 22 2022

Malik Bhai

0 Answers Avg Quality 2/10

how to import images from public folder in react js

Contents

More Related Answers

how to import images from public folder in react js

Closely Related Answers

import an image react in the public folder

import all images from folder reactjs

react import all images from folder

import an image react in the public folder

Import all images from folder react

react js public folder image path search

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.