importing image dynamically (React Js) (Require img path cannot find module)

Question

I need to import images(several) from my image file dynamically by a map method. First, I want to set a base URL to my images file and then read the image's name from my JSON file which includes the image property and then set the image src accordingly. The JSON file is like below :

{
      "title": "Blue Stripe Stoneware Plate",
      "brand": "Kiriko",
      "price": 40,
      "description": "Lorem ipsum dolor sit amet...",
      "image": "blue-stripe-stoneware-plate.jpg"
    },
    {
      "title": "Hand Painted Blue Flat Dish",
      "brand": "Kiriko",
      "price": 28,
      "description": "Lorem ipsum dolor sit amet...",
      "image": "hand-painted-blue-flat-dish.jpg"
    },

my images folder :

I have read the products by redux which is works perfectly =>

const products = this.props.products;
console.log(products, 'from redux'); 
const fetchProducts = [];
    for (let key in products) {
      fetchProducts.push({
        ...products[key]
      });
    }

the console.log() =>

Now I want to define a base URL like this which later use as image src by adding the image's name from the JSON file in the map method :

const baseUrl = '../../components/assets/images/';
const fetchProducts = [];
for (let key in products) {
  fetchProducts.push({
    ...products[key]
  });
}

const productCategory = fetchProducts.map((product, index) => {
  return (
    <Photo
      key={index}
      title={product.title}
      brand={product.brand}
      description={product.description}
      imageSource={baseUrl + product.image}
      imageAlt={product.title}
    />
  );
});

my Photo component looks like below :

  const photo = props => (
  <div className={classes.Column}>
    <img src={require( `${ props.imageSource }` )} alt={props.imageAlt} />
    <div className={classes.Container}>
      <p>{props.brand}</p>
      <p>{props.title}</p>
      <p>{props.price}</p>
    </div>
  </div>
);

export default photo;

unfortunately, I have faced this error: Thanks in advance and sorry for my bad English :)

This import("../../components/assets/images/") Did you think this would somehow specify a folder for later use...? IF what you're trying to do is going to work at all, you have to combine the baseURL and image filename into a valid path first, then import it. — user5734311
– user5734311, Commented Sep 4, 2018 at 17:16
I had the same issue today, did you find a solution in the passed 2 years? :) — Andreas G.
– Andreas G., Commented Nov 16, 2022 at 20:37
haha, Im not sure, if im remember correctly, the base URL solution worked — Vahid
– Vahid, Commented Nov 7, 2023 at 6:31

devserkan · Accepted Answer · 2018-09-04 17:55:04Z

12

Import is not working like that. You can use a base URL like that:

const baseUrl = "../../components/assets/images/";

Then you can pass to your Photo component like that:

<Photo
  key={index} // Don't use index as a key! Find some unique value.
  title={product.title}
  brand={product.brand}
  description={product.description}
  imageSource={baseUrl + product.image}
  imageAlt={pro.title}
/>;

Lastly, in your Photo component use require:

<img src={require( `${ props.imageSource }` )} alt={props.imageAlt} />

or like that:

<img src={require( "" + props.src )} alt={props.imageAlt} />

But, don't skip "" part or don't use it directly like:

<img width="100" alt="foo" src={require( props.src )} />

since require wants an absolute path string and first two do this trick.

answered Sep 4, 2018 at 17:55

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

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

7 Comments

Vahid Over a year ago

thanks man, but I have faced another error : Uncaught Error: Cannot find module '/static/media/blue-stripe-stoneware-plate.8bf3a194.jpg,/static/media/hand-painted-blue-flat-

devserkan Over a year ago

Can you update your question with your current code? It looks requiring is OK. Those names are dynamic and used by CRA (Webpack behind probably).l

devserkan Over a year ago

Where is this file in your directory structure?

Vahid Over a year ago

/src/components/assets/images

devserkan Over a year ago

No, I mean this component's file place that you are using images in.

|

gene b. · Accepted Answer · 2021-04-26 15:46:26Z

After trying all kinds of solutions, including backticks <img src={require( `${ props.imageSource }` )} and others, nothing was working. I kept getting the error Cannot find module, even though my relative paths were all correct. The only primitive solution I found, if you have a relatively small number of possible images, is to predefine a Map that will map to the actual imports. (Of course this won't work for lots of images.)

import laptopHouse from '../../images/icons/laptop-house.svg'
import contractSearch from '../../images/icons/file-contract-search.svg'
..

const [iconMap, setIconMap] = useState({
                                'laptopHouse': laptopHouse, 
                                'contractSearch': contractSearch, 
                                ..
                              });

..

<img src={iconMap[props.icon]} />

Codex R · Accepted Answer · 2022-08-27 12:22:55Z

1

Try this solution for dynamic image:-

**Componet**
const photo = props => (
    <div className={classes.Column}>
      <img src={require( `../../components/assets/images/${props.imageSource}`)} alt={props.imageAlt} />
      <div className={classes.Container}>
        <p>{props.brand}</p>
        <p>{props.title}</p>
        <p>{props.price}</p>
     </div>
   </div>
);

**Include Componet**
const productCategory = fetchProducts.map((product, index) => {
    return (
      <Photo
        key={index}
        title={product.title}
        brand={product.brand}
        description={product.description}
        imageSource={product.image}
        imageAlt={product.title}
      />
    );
});

edited Aug 27, 2022 at 12:22

answered Aug 27, 2022 at 11:59

Codex R

112 bronze badges

Comments

heilala · Accepted Answer · 2021-04-18 20:31:03Z

0

So here is what I found and it worked for me.

"file-loader": "4.3.0" React: 16.12

Run this in your terminal:

npm run eject

Check file-loader in config/webpack.config and located file-loader configurations. What I did was, I created a directory called static/media/{your_image_name.ext} following the notation there:

options: {
    name: "static/media/[name].[hash:8].[ext]"
}

and then imported this image like

import InstanceName from "static/media/my_logo.png";

Happy Hacking!

edited Apr 18, 2021 at 20:31

heilala

86210 silver badges21 bronze badges

answered Feb 5, 2020 at 11:35

Ali Raza

1921 gold badge2 silver badges8 bronze badges

Comments

Milan · Accepted Answer · 2022-08-10 17:28:03Z

i solved this typescript issue as follows in my project. hope this is helpful

export const countryData = {
'sl': { name: 'Sri Lanka', flag: '/flag-of-Sri-Lanka.png' },
'uk': { name: 'UK', flag: '/flag-of-United-Kingdom.png' },
'usa': { name: 'USA', flag: '/flag-of-United-States-of-America.png' },
'ca': { name: 'Canada', flag: '/flag-of-Canada.png' },
'It': { name: 'Italy', flag: '/flag-of-Italy.png' },
'aus': { name: 'Australia', flag: '/flag-of-Australia.png' },
'me': { name: 'Middle East', flag: '/flag-of-Middle-East.png' },
'other': { name: 'Other', flag: '/flag-of-World.png' }, };

"part of URL within Double quotes" + dynamic_URL_via_var combo worked for me.

<Avatar src={require('../assets'+countryData['uk']['flag'])} />

Pooja · Accepted Answer · 2022-12-15 10:19:25Z

0

  //json data.
  "ProductSlider":[
              {
                "image":"Product1.jpg"
              },
              {
                "image":"Product2.jpg"
              }]
   //mapping data list in parent component.
    {sliderData.map((data) => (
            <SwiperSlide className='w-10 '>
            <ProductCard data={{imgSrc: data.image}}  />
            </SwiperSlide>
          ))}
        
    //child component(linked image).
        import React from 'react'
        import { CardImg } from 'react-bootstrap'
        
        export default function ProductCard(props) {
          let {imgSrc} = props.data;
        
          return (
            <div className="overflow-hidden">  
              <div className='overflow-hidden bg-grey opacity-card' >
                <CardImg  
                      variant='top'
                      src={require(`../assets/images/${imgSrc}`)}
                     />
              </div>
              <div className='text-center p-1 opacity-card-title' >
                <div>Add to cart</div>
              </div>
            </div>
          )
        }

answered Dec 15, 2022 at 10:19

Pooja

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Sachin 102 · Accepted Answer · 2023-07-01 08:25:44Z

0

I was also facing the same problem in my React app. I tried to solve this problem & at last, I get a solution.

This thing works for me. I hope it will work for you as well.

I Place that image's folder where was my xyz.js file.

Before:- Not Working

/imgfolder
/workingfolder
    index.js

After:- Working

/workingfolder
    /imgfolder
    index.js file

I think it is not working if the images are outside the working folder, my assumption may be wrong but this thing works for me. Have a good day my friend.

edited Jul 1, 2023 at 8:25

answered Jul 1, 2023 at 8:25

Sachin 102

12 bronze badges

Comments

Refayth Hossian · Accepted Answer · 2023-08-10 07:05:42Z

0

if your images are in src file then try this

<img src={require("" + props.IMAGE_FULL_NAME_WITH_PATH_FROM_SRC)} alt={props.name} />

answered Aug 10, 2023 at 7:05

Refayth Hossian

11 bronze badge

Comments

Arshad · Accepted Answer · 2020-04-24 19:55:18Z

-2

Even I got the same error

{gallery.map((ch, index) => {....

cannot find module '/../..................png'

I went wrong here, I used src instead of ch

Error
<Image src={src.image} />

Solved
<Image src={ch.image} />

answered Apr 24, 2020 at 19:55

Arshad

3434 silver badges10 bronze badges

Collectives™ on Stack Overflow

importing image dynamically (React Js) (Require img path cannot find module)

9 Answers 9

7 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

7 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related