Я пытаюсь показать сетку изображений, и я сопоставил значения пути изображения объекта FilterItems с тегом src. В то время как жестко запрограммированные значения показывают правильно загруженные изображения. Я использую приложение create-реагировать. Значения пути изображения как переменные показывают мне эту ошибку в браузере:

Error: Cannot find module '../../assets/images/products/product1/1.jpg' 

Важно отметить, что я импортирую его из файла JSON из базы данных. Пример console.log пути к изображению из объекта FilterItems приведен ниже:

console.log пути к изображению

Ниже я показываю свой код (его части), который я использую:

 ... var itemList = filteredItems.map((item: any) ={amp}gt; { return ( {amp}lt;div key={item.id}{amp}gt; ... {amp}lt;NavLink to={`/products/${item.id}`}{amp}gt; {amp}lt;img // values from variable that is mapped from "filteredItems" src={require(`${item.img1}`)} // hardcoded values that show correctly loaded picture // src={require("../../assets/images/products/product1/1.jpg")} alt="image" /{amp}gt; ... 

Обратите внимание, что оба пути (жестко запрограммированные и из ошибок, которые я описал выше) абсолютно одинаковы, и путь правильный:

 "../../assets/images/products/product1/1.jpg" 

Я также вставляю ниже ошибку из консоли Chrome (она показывает информацию о Webpack):

 Uncaught Error: Cannot find module '../../assets/images/products/product1/1.jpg' at webpackContextResolve (^.*$:28) at webpackContext (^.*$:23) at productGrid.tsx:138 at Array.map ({amp}lt;anonymous{amp}gt;) at ProductGridComponent (productGrid.tsx:105) at renderWithHooks (react-dom.development.js:16295) at updateFunctionComponent (react-dom.development.js:18341) at beginWork$1 (react-dom.development.js:20135) at HTMLUnknownElement.callCallback (react-dom.development.js:337) at HTMLUnknownElement.Object.isExtensible.Object.isExtensible.n.___hb.n.___hb (builder.js:389) at Object.invokeGuardedCallbackDev (react-dom.development.js:386) at invokeGuardedCallback (react-dom.development.js:439) at beginWork$$1 (react-dom.development.js:25723) at performUnitOfWork (react-dom.development.js:24646) at workLoopSync (react-dom.development.js:24622) at performSyncWorkOnRoot (react-dom.development.js:24211) at react-dom.development.js:12263 at unstable_runWithPriority (scheduler.development.js:821) at runWithPriority$2 (react-dom.development.js:12209) at flushSyncCallbackQueueImpl (react-dom.development.js:12258) at flushSyncCallbackQueue (react-dom.development.js:12246) at flushPassiveEffectsImpl (react-dom.development.js:25361) at unstable_runWithPriority (scheduler.development.js:821) at runWithPriority$2 (react-dom.development.js:12209) at flushPassiveEffects (react-dom.development.js:25303) at react-dom.development.js:25182 at workLoop (scheduler.development.js:765) at flushWork (scheduler.development.js:720) at MessagePort.performWorkUntilDeadline (scheduler.development.js:212) 

Что я пробовал:

  1. До того, как я отобразил его из файла JSON из базы данных, у меня был файл javascript с объектами javascript, из которых эти изображения были успешно загружены. Ниже я показываю часть этого файла:

export const items = [ { id: 0, title: "shirt 1", img1: require("../../assets/images/products/product1/1.jpg"), img2: require("../../assets/images/products/product1/2.jpg"), cost: 30, color: "white", size: "S, M, L, XL, XXL" }, { id: 1, title: "shirt 2", img1: require("../../assets/images/products/product2/1.jpg"), img2: require("../../assets/images/products/product2/2.jpg"), cost: 40, color: "black", size: "S, M, L, XL, XXL" } ];

  1. Я читал эти посты:

1) https://stackoverflow.com/a/52171663/11788161

2) https://stackoverflow.com/a/34583854/11788161

  1. Я проверил, если путь правильный.

Вы знаете, где может быть проблема? Это может быть проблема с тем, что я получаю его из файла JSON? Или, может быть, я должен подготовить этот путь для Webpack, чтобы как-то успешно его обработать?