Referring to the post below, I found a simpler solution by changing the .json file to a .js file. Then, as the post suggested, I converted the data to:

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

Then in the component I just used

This error is related to how React's underlying webpack works with the require() function. require() is not a standard JavaScript function, but a functionality provided by Node.js and webpack. require() Performs synchronous reading of modules during the build process, which means webpack needs to know the dependencies between modules at build time (before the application runs) rather than at runtime.

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

In this case, I suggest two possible solutions:

1. Use dynamic import:

This is a feature provided by modern JavaScript and webpack also supports it. Here's how you 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 && }
        
    );
}

Please note that you need to provide a relative path to the project root directory in the JSON file for this to work properly.

1. Serve images using a public folder: If you use create-react-app you can put the image into a public folder. You can then reference these images via paths relative to the public folder:

function BlogPost(props) {
    const { img } = props;
    return (
        <>
            
        
    );
}

Please note that in the JSON file you only need to provide the path to the public directory.