时间戳

首页 > 解决方案 > react src中的正确路径

reactjs - react src中的正确路径

问题描述

我有一个 react 应用程序，在我src的文件夹中，我创建了一个assets文件夹，我images在该文件夹内部和内部都有sample-product.jpg。所以路径是这样的：

src/assets/images/sample-product-jpg

现在在我的src文件夹中，我创建了一个虚拟文件，接下来我可以将其拉出：

const products = [
  {
    _id: '1',
    name: 'Baume & Mercier',
    image: '../src/assets/images/sample-product.jpg',
    description:
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
    brand: 'Baume',
    category: 'Analog',
    price: 89.99,
    countInStock: 10,
    rating: 4.5,
    numReviews: 12,
  },
}]

当我在我的代码中调用它时，路径不正确并且它给了我一个损坏的图像路径。

有没有人可以告诉我正确的图像路径？

更新：好的，所以我认为对此存在一些误解。我上面提到的虚拟文件是一个对象数组。这样做的目的是让我可以在我的Products.js文件中映射它。因此，通过一一添加它们import并不酷，因为它会失去地图的目的。

标签： reactjs

解决方案

使用这种方法，

import React from "react";

const products = [
  {
    _id: "1",
    name: "Baume & Mercier",
    image: "./assets/images/sample-product.jpg",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    brand: "Baume",
    category: "Analog",
    price: 89.99,
    countInStock: 10,
    rating: 4.5,
    numReviews: 12
  }
];



 export default function TestImg() {
  return (
    <div className="App">
      <h1>IMAGE FILE</h1>
      {products.map((v) => (
        <img src={require("" + v.image)} alt="" />
      ))}
    </div>
  );
}

工作代码 - https://codesandbox.io/s/wispy-smoke-pefd8?file=/src/TestImg.js

推荐阅读