React Component with JSON Image path - arrays

Question

I have a react component that is pulling in some data from a local json file. That data has some links to images. However the images aren't loading even though the paths are correct. I was using require before but in a different code setup. Now that I've transitioned it to this the images won't load. i'm using webpack 4 so i'm guessing i need to require the images again? How do i do that in the below statement ?
the part that is failing is the 'image={release.imageURL}' which is being passed to the 'src' of the component
import React from "react";
import ReactDOM from "react-dom";
import Release from "./release.js"
import data from "../data/releases.json"
const allReleases = data.map(release => {
return (
<div className="column-2">
<Release
key={release.id}
url={release.releaseURL}
image={release.imageURL}
cta={release.cta}
title={release.title}
artists={release.artists}
/>
</div>
)
})
const Releases = () => {
return (
<div>
<div className="row">
<h3>All Releases</h3>
{allReleases}
</div>
</div>
)
}
export default Releases;

Answer 1

Without knowing the details of what you're trying to achieve, I think you can do the following:
Because you're providing paths in your json, you'll need to require them dynamically.
releases.json
[
{
imageURL: "/image01.jpg"
},
{
imageURL: "/image02.jpg"
},
{
imageURL: "/image03.jpg"
}
]
then assuming you know the relative path to these images you can require them inside your map
const allReleases = data.map(release => {
return (
<div className="column-2">
<Release
url={require('./path/to/images' + release.imageURL)}
/>
</div>
)
})
Alternatively, you could make your releases.json a js file and import your images there and put them in your data as variables.

Answer 2

Bro, I was working on this problem and eventually figure it out:
1- All you have to do is changing the path of the image from your JSON file. That means the path should be related to your react component (allReleases).
2- Next thing, instead of using
*
<Release
key={release.id}
url={release.releaseURL}
image={release.imageURL} // ==> WRONG
cta={release.cta}
title={release.title}
artists={release.artists}
/>
Just go with:
*
<Release
key={release.id}
url={release.releaseURL}
image={`${release.imageURL}`} // ===> CORRECT
cta={release.cta}
title={release.title}
artists={release.artists}
/>