score:1

Accepted answer

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="" />
    )
}

Related Query

More Query from same tag