Module image not found React Redux - reactjs

Question

I am having trouble locating the location of my images with react redux.
I am creating a react movie card that looks like this:
http://react-movie-cards.drminnaar.me/
My state is in the redux store.
My file structure is this.
the state is located at MovieList-reducer.js and I mapped it at MovieCard.js file.
why is it having an error like this:
×
←→1 of 6 errors on the page
Error: Cannot find module '../images/Kingsglaive_Final_Fantasy_XV.jpg'
▶ 32 stack frames were collapsed.
and have this in the terminal:
./src/Movies/MovieCard.js
Critical dependency: the request of a dependency is an expression
Please help me locate the file of the images.
you can find and clone my repo in https://github.com/bradrar/movie-cards and yarn start or npm start
I just need to locate the images and map it like so:
<img className="card-img-top" src={require(props.movie.imageUrl)} alt="" />
I know I am very close because I tried
<img className="card-img-top" src={require("../images/Ghost_In_The_Shell_2_0.jpg")} alt="" />
and it looks like this:

Answer 1

See my pull request here. Because webpack needs to know all your dependencies at build time, it's not possible to use require in a dynamic context. Use require.context() to build a context of all your images, and then reference them using that context.
First, change your references to use ./ instead (As because we're loading that folder into context, that essentially becomes the root ./):
{
"id": 100,
"title": "Kingsglaive",
...
"imageUrl": "./Kingsglaive_Final_Fantasy_XV.jpg"
},
And then in your movie card, create the context. (React will read through the folder at build time, and then give you the ability to access them using the context created):
const movieImages = require.context("../images/", true, /\.jpg$/);
const MovieCard = (props) => {
return (
...
<img className="card-img-top" src={movieImages(props.movie.imageUrl)} alt="" />
)
}