How to use path in require method in react with node.js?

Question

I am trying to paste a path to a picture within the img tag with the require() method.

This is the component. Props are passed from the parent correctly because console.log(img) return the correct path.

import data from '../asset/data/blog-post.json'

function BlogPostFeed() {
    const post = data.map(item => {
        return <BlogPost
            key={item.id}
            img={item.img}
        />
    })
    return (
        <>
            {post}
        </>
    )
}

function BlogPost(props) {
    const { img } = props;
    return (
        <>
            <img src={require(img)} alt="photo" />
        </>
    )
}

This is what the json file looks like.

[ 
 {
        "id": 1,
        "img": "../photo/photo.jpeg"  
 }
]

I am sure all the folder path are correct.

I tried to paste the path <img src={require"../photo/photo.jpeg"} alt="sth"/> and is working. However, neither <img src={require(img)} or <img src={require(${img})} alt="sth"/> would work.

I have also tried altering the json file to "img": require("../photo/photo.jpeg") but then an error for json file comes up.

An error Cannot find module '../photo/photo.jpeg' pops up.

One option could be to store the image in your `public` folder and then you can use directly without the need for `require` — Kaneki21, Jul 09 '23 at 03:59
What do you want to achieve by using `require`? Why not just ``? — Bergi, Jul 09 '23 at 04:25
Why is this tagged [tag:node.js]? How are you using react, what is your build pipeline? — Bergi, Jul 09 '23 at 04:25

score 1 · Accepted Answer · answered Jul 09 '23 at 03:59

The error is related to how the webpack, which underlies React, works with the require() function. require() is not a standard JavaScript function, but a feature provided by Node.js and webpack. require() performs a synchronous read of the module during the build process, which means that webpack needs to understand the dependencies between modules at build time (before the app runs), not at runtime.

So, when you use require("../photo/photo.jpeg") directly, webpack knows to include this file in the build bundle because the path is static, not dynamic. However, when you try to use require(img), webpack doesn't know what file you're referring to until the code runs, which is too late.

In this case, I would suggest two possible solutions:

Using dynamic imports:

This is a feature provided by modern JavaScript, and webpack supports it too. Here is how you could use it in your component:

import React, { useState, useEffect } from 'react';

function BlogPost(props) {
    const { img } = props;
    const [imgSrc, setImgSrc] = useState();

    useEffect(() => {
        import(`../${img}`)
        .then((image) => setImgSrc(image.default))
        .catch((err) => console.error(err));
    }, [img]);

    return (
        <>
            {imgSrc && <img src={imgSrc} alt="photo" />}
        </>
    );
}

Note that you need to provide a relative path from the root directory of your project in your JSON file for this to work.

Using public folder to serve the images: If you're using create-react-app, you can put your images in the public folder. Then, you can refer to these images by their path relative to the public folder:

function BlogPost(props) {
    const { img } = props;
    return (
        <>
            <img src={process.env.PUBLIC_URL + '/photo/photo.jpeg'} alt="photo" />
        </>
    );
}

Note that in your JSON file, you just need to provide the path from the public directory.

Thank you for the answer. I do not recommend the second solution with reference to this post which suggest photo that would be rendered in the component should be store in the src folder. https://stackoverflow.com/questions/44643041/do-i-store-image-assets-in-public-or-src-in-reactjs — Leung Cho-shing, Jul 09 '23 at 04:10
For the first solution I have not tested it out yet. However, I have found another simpler solution and I will update shortly. — Leung Cho-shing, Jul 09 '23 at 04:11
Do you have a comment regarding your first solution and the answer I posted? I am new to the react community and would love to know whichever is the best for this problem. — Leung Cho-shing, Jul 09 '23 at 04:17
@LeungCho-shing your approach is perfectly fine! My first example is using a dynamic import. If you're interested, you could look up the benefits, but it's mainly related to performance — Y. Gherbi, Jul 09 '23 at 14:23
Is there any difference by using { useEffect } versus React.lazy & React.suspense for dynamic import? — Leung Cho-shing, Jul 09 '23 at 16:20

score 1 · Answer 2 · edited Jul 11 '23 at 21:24

With reference to the following post, I have worked out a simpler solution by changing the .json file to .js file. Then, as suggested by the post, I convert the data to:

const data = [ 
  {
    id: 1,
    img: require("../photo/photo.jpeg")  
  }
]
export default data;

Then in the component, I just used <img src={img} alt="sth"/>

How to use template literals in require? (require(`${somePath}`))

How to use path in require method in react with node.js?

2 Answers2