ReferenceError:尝试从json导入图像路径时未定义数据

我试图使用“img”标记在JSON文件中迭代图像路径，以在浏览器中显示它们。硬编码值工作正常，但当我试图根据本文将其更改为变量时：

下面是我的products.json文件，其中包含数据（我将我的资产文件夹与App.tsx文件保存在同一个文件夹中）：

这是我使用这些数据的代码（注释行是一个硬编码值，它在浏览器中返回一个有效的picrute，但只针对一个“id”）：

编辑2：当我使用“import data from.”/products.json“console.log（data）时，我会在chrome开发工具中获得以下日志：

Objectdata: Array(2)0: cost: 30detailPage: {productDetail: "white", size: "S, M, L, XL, XXL"}id: 1img: "./assets/images/1.jpg"title: "T-shirts"__proto__: Object1: cost: 40detailPage: {productDetail: "black", size: "S, M, L, XL, XXL"}id: 2img: "./assets/images/2.jpg"title: "T-shirts"__proto__: Objectlength: 2__proto__: Array(0)concat: ƒ concat()arguments: (...)caller: (...)length: 1name: "concat"__proto__: ƒ ()[[Scopes]]: Scopes[0]constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()flat: ƒ flat()flatMap: ƒ flatMap()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()values: ƒ values()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}__proto__: Object__proto__: constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()

---

您知道可能导致此错误的原因吗？提前感谢您的帮助。

最后，我采用了以下解决方案：

我创建了“.tsx”文件，它是.json文件中数据的副本，在我的图像路径前面添加了“require”：

const data3 = [
  {
    id: 1,
    title: "T-shirts",
    img: require("./assets/images/1.jpg"),
    cost: 30,
    detailPage: {
      productDetail: "white",
      size: "S, M, L, XL, XXL"
    }
  },
/... rest of data .../
export default data3;

在我的App.tsx中：

/ ... /
         <img src={`${data3[id].img}`} alt="t-shirt" />
/ ... /

//
/ ... /

---

这不是一个理想的解决方案，因为我必须将数据从JSON文件复制到另一个文件，但它确实起到了作用。

我认为这个错误可能隐藏了真正的问题。当您暂时删除图像标记时，

Product:{data[id].id}
是否显示“Product:1”和“Product:2”“到屏幕？您能像导入“/products.json”中的jsondata那样导入它吗？”和控制台日志？你正在使用webpack吗？编辑：是的，我正在使用webpack。当我删除带有“img”标记的行时，我看到了正确的输出：“产品：1成本：30产品：2成本：40”我添加了一个编辑，当我更改为：从导入数据时出错。/products.json'我正在使用create-react应用程序
Element implicitly has an 'any' type because expression of type 'number' can't be used to index type '{ "data": { "id": number; "title": string; "img": string; "cost": number; "detailPage": { "productDetail": string; "size": string; }; }[]; }'.
  No index signature with a parameter of type 'number' was found on type '{ "data": { "id": number; "title": string; "img": string; "cost": number; "detailPage": { "productDetail": string; "size": string; }; }[]; }'.

Objectdata: Array(2)0: cost: 30detailPage: {productDetail: "white", size: "S, M, L, XL, XXL"}id: 1img: "./assets/images/1.jpg"title: "T-shirts"__proto__: Object1: cost: 40detailPage: {productDetail: "black", size: "S, M, L, XL, XXL"}id: 2img: "./assets/images/2.jpg"title: "T-shirts"__proto__: Objectlength: 2__proto__: Array(0)concat: ƒ concat()arguments: (...)caller: (...)length: 1name: "concat"__proto__: ƒ ()[[Scopes]]: Scopes[0]constructor: ƒ Array()copyWithin: ƒ copyWithin()entries: ƒ entries()every: ƒ every()fill: ƒ fill()filter: ƒ filter()find: ƒ find()findIndex: ƒ findIndex()flat: ƒ flat()flatMap: ƒ flatMap()forEach: ƒ forEach()includes: ƒ includes()indexOf: ƒ indexOf()join: ƒ join()keys: ƒ keys()lastIndexOf: ƒ lastIndexOf()length: 0map: ƒ map()pop: ƒ pop()push: ƒ push()reduce: ƒ reduce()reduceRight: ƒ reduceRight()reverse: ƒ reverse()shift: ƒ shift()slice: ƒ slice()some: ƒ some()sort: ƒ sort()splice: ƒ splice()toLocaleString: ƒ toLocaleString()toString: ƒ toString()unshift: ƒ unshift()values: ƒ values()Symbol(Symbol.iterator): ƒ values()Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}__proto__: Object__proto__: constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()

const data3 = [
  {
    id: 1,
    title: "T-shirts",
    img: require("./assets/images/1.jpg"),
    cost: 30,
    detailPage: {
      productDetail: "white",
      size: "S, M, L, XL, XXL"
    }
  },
/... rest of data .../
export default data3;

/ ... /
         <img src={`${data3[id].img}`} alt="t-shirt" />
/ ... /