從JSON源導入圖像（create-react-app）

Question

我有一些帶有數據的json，參數之一是帶有圖像的本地文件夾的路徑：

// data.json
[
  {
    "id": 1,
     "image": "assets/somepic.png"
  },
  {
    "id": 2,
     "image": "assets/anotherpic.png"
  }
  // similar data goes there
]

然后將這些數據導入到我的組件中

import data from "data.json"

我想通過此數據進行映射：

render() {
  return (
     data.map((item) => (
       // Ofc it won't work if I just put {item.image} in src,
       // because we need to import image before use it
       // that's why I'm trying to use require
       <img src={require(item.image)} />
     ))
  )
}

但這是行不通的。 如何使用圖像，在json數據中為create-react-app指定了哪個本地補丁？

請注意：應用程序不應彈出。

Answer 1

檢查create-react-app是否已將Webpack配置為開箱即用捆綁圖像（.png檢查webpack.config.js ）。 如果是這樣，如果assets與組件位於同一文件夾中，則似乎您只是缺少一個像“ ./assets/anotherpic.png”這樣的相對路徑。

Answer 2

確保從正確的路徑加載。 您的照片未位於assets/anotherpic.png ，也許您應該從絕對路徑./assets/anotherpic.png

Answer 3

如果您使用Webpack v4，是否嘗試使用require.context() ？

它允許您傳遞要搜索的目錄，指示是否也應搜索子目錄的標志以及用於匹配文件的正則表達式。

請參閱webpack文檔中的源代碼

您的代碼可以是這樣的：

data.json

[
  {
    "id": 1,
     "image": "somepic.png"
  },
  {
    "id": 2,
     "image": "anotherpic.png"
  }
  // similar data goes there
]

file.js

const pathToAssets = require.context('assets/');

...

render() {
  return (
     data.map((item) => (
       <img src={pathToAssets(item.image)} />
     ))
  )
}