Workaround for manually importing images' source in React

Question

Is there any workaround or loader available for having to manually import images?

<img src="../assets/img/user/user-13.jpg" alt="" /> this sort of tags in JSX/JS files

Given that we are dealing with jsx HTML loader doesn't cut it out.

I see these sort of solutions: <img src={process.env.PUBLIC_URL + "/images/test.jpg"}

But in my case, I have to make such changes in 100s of files, so it would be really helpful if there are any loaders that automate such a thing.

did ever try to put it in map? if its on your asset folder you can make an array object contains image path then do REPL using map — Antolin Bernas, Jul 13 '22 at 22:14
Does this help ? https://stackoverflow.com/questions/71648571/how-can-i-import-all-the-images-from-a-folder-into-an-array-with-react-builded-i — Ryan Zeelie, Jul 13 '22 at 23:41
@RyanZeelie Not really I want to automate the process of having to manually import img src tags. — Ganesh Khadka, Jul 14 '22 at 04:38
@AntolinBernas No, I do not want to manually maintain any maps. — Ganesh Khadka, Jul 14 '22 at 04:39
This creates an object of images in the folder. Then just loop over the images and return for each of them : https://stackoverflow.com/q/42118296/15474532 — Ryan Zeelie, Jul 14 '22 at 06:27

score 0 · Answer 1 · answered Jul 14 '22 at 06:32

0

export default function App() {

  function importAll(r) {
    let images = {};
    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
    return images;
  }
  
  const images = importAll(require.context('../public/assets', false, /\.(png|jpe?g|svg)$/));
  useEffect(() => {
 
  }, []);
  return (
    <div>
      <p>All My images</p>
     {Object.values(images).map((img,i)=><img key={i} src={img} alt={"an alt"} />) }
    </div>
  );
}

answered Jul 14 '22 at 06:32

Ryan Zeelie

1,320
5
12

Based off stackoverflow.com/q/42118296/15474532 – Ryan Zeelie Jul 14 '22 at 06:33
This doesn't work. The above code basically pulls out all the images available in the context and creates a collage. I do not want to automate imports, I want to automate having to manually write ```process.env.PUBLIC_URL ``` in – Ganesh Khadka Jul 14 '22 at 10:58

Workaround for manually importing images' source in React

1 Answers1