How to assign image src dynamically without import or component in react

Question

I need assistance of displaying the images without import or any external component. I have tried all the below methods but nothing worked out. Any assistance on this matter is much appreciated.

When i use require(), I get the error a Cannot find module '../assets/images/products

import React from "react";
    
export default function ProductGallery() {
  const products = [
    {
      ProductImage: "../assets/images/products/image1.jpg",
    },
    {
      ProductImage: "../assets/images/products/image2.jpg",
    },
  ];

  return (
    <div className="row">
      {products.map((item, index) => (
        <div className="galleryBox" key={index}>
          <img src={require(item.ProductImage)}/>
          <img src={require(""+item.ProductImage)}/>
          <img src={require(`${item.ProductImage}`)}/>
          // all the three methods didnt work
          <img src={item.ProductImage}/>
          // this doesnt show image at all. When I Inspect, it shows the path correct. But it should come from ../static, however it showing actual path
        </div>
      ))}
    <div>
  );
}

Giovanni Esposito · Accepted Answer · 2020-08-15 19:33:11Z

1

Ciao, unfortunately require function does not accept dynamic resources. The problem is related to the fact require function will be loaded before runtime and, if it doesn't find a resource at that time, it doesn't work.

A possible workaround is made an object with all the resources you need like:

export default resources = {
   image1: require('../assets/images/products/image1.jpg'),
   image2: require('../assets/images/products/image2.jpg')
}

Then import this object in your component and use it like this:

<img src={resources.image1}/>
<img src={resources.image2}/>

It's the only way I found to have dynamic resources with require function.

answered Aug 15, 2020 at 19:33

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

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

7 Comments

SajZ Over a year ago

export default resources = { image1: require('../assets/images/products/image1.jpg'), image2: require('../assets/images/products/image2.jpg') } But that's coming it will be coming from the backend. I will assign this to the data coming from the backend later.

SajZ Over a year ago

in that case, i might not be able to use require

Giovanni Esposito Over a year ago

Sorry I don't understand. What is coming from backed? resources it's just an object that you could initialized in a separated file of your project and import in component in which you need to show image1 or image2.

SajZ Over a year ago

i will get this image resource as a json data from my api. so the json data will look something like the products array.

Giovanni Esposito Over a year ago

Ok understood. The problem becames harder. But let me understand better: you have your images in '../assets/images/products/image1.jpg' that si a folder in your project and then you asking to the backend to provides you the path to these resources correct?

|

SajZ · Accepted Answer · 2020-08-23 08:44:23Z

0

Place the image in the Public folder, so that, the reference path can pull the image.

answered Aug 23, 2020 at 8:44

SajZ

2604 silver badges18 bronze badges

Comments

VLAZ · Accepted Answer · 2025-01-28 10:31:49Z

0

<img loading='lazy' src={require('../../assets/images/logo.svg').default} alt="logo" />

edited Jan 28 at 10:31

VLAZ

29.6k9 gold badges65 silver badges87 bronze badges

answered Jan 28 at 10:28

Nayan Kakadiya

11 bronze badge

Collectives™ on Stack Overflow

How to assign image src dynamically without import or component in react

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related