Изображение модуля не найдено React Redux

Question

У меня возникли проблемы с поиском местоположения моих изображений с помощью активного отклика.

Я создаю карту реагирования фильма, которая выглядит следующим образом:

http://react-movie-cards.drminnaar.me/

Мое состояние находится в избыточномstore.

Моя файловая структура такая.

состояние находится в MovieList-reducer.js, и я отобразил его в файле MovieCard.js.

почему возникает такая ошибка:

   ×
←→1 of 6 errors on the page
Error: Cannot find module '../images/Kingsglaive_Final_Fantasy_XV.jpg'
▶ 32 stack frames were collapsed.

и есть это в терминале:

    ./src/Movies/MovieCard.js
Critical dependency: the request of a dependency is an expression

Пожалуйста, помогите мне найти файл изображений.

вы можете найти и клонировать мой репо в https://github.com/bradrar/movie-cards и начало пряжи или npm start

Мне просто нужно найтиизображения и сопоставить это так:

<img className="card-img-top"  src={require(props.movie.imageUrl)} alt="" />

Я знаю, что я очень близок, потому что я пытался

 <img className="card-img-top"  src={require("../images/Ghost_In_The_Shell_2_0.jpg")} alt="" />

, и это выглядит так:

Answer 1

Смотрите мой запрос здесь .Поскольку webpack должен знать все ваши зависимости во время сборки, невозможно использовать require в динамическом контексте.Используйте require.context(), чтобы создать контекст всех ваших изображений, а затем сослаться на них, используя этот контекст.

Сначала измените ваши ссылки, чтобы использовать вместо них ./ (как, потому что мызагрузка этой папки в контекст, который по сути становится корневым ./):

{
    "id": 100,
    "title": "Kingsglaive",
    ...
    "imageUrl": "./Kingsglaive_Final_Fantasy_XV.jpg"
},

А затем в вашей видеокарте создайте контекст.(React прочитает папку во время сборки, а затем даст вам доступ к ним, используя созданный контекст):

const movieImages = require.context("../images/", true, /\.jpg$/);

const MovieCard = (props) => {
    return (      
        ...
        <img className="card-img-top" src={movieImages(props.movie.imageUrl)} alt="" />
    )
}