reactjs - React - 显示图像的正确路径

Question

我有一个 React 组件，并希望图像与名称/价格一起显示。

如果图像上传到同一个文件夹，您可以将这些路径添加为徽标键的值吗？

现在，图像已损坏。

没有控制台错误或任何东西。

零件

const [products] = React.useState([
    { name: "Mothership", price: 10, logo: "./PHX130.png" },
    { name: "Illideph", price: 20, logo: "./PHX132.png" },
    { name: "Phoenix", price: 30, logo: "./TX15.png" }
  ]);

返回

{products.map((product, index) => (
        <Product key={index} product={product}>
          <img src={product.logo} alt="website logo" />
          <button className="button" onClick={() => addToCart(index)}>Add to cart</button>
        </Product>
 ))}

标签： reactjsimagereact-hooksjavascript-objects

Answer 1

这取决于。如果您使用的是资源捆绑器（例如 Webpack），则可以直接 require 它，并且将为您设置路径：

<img src={require('./image.png')} />

请注意，您需要启用图像加载器（ webpack的 file-loader）。

否则，路径需要相对于您的输出 javascript 文件在服务器上的位置。例如，如果你main.js是 at /，你需要有相对于你的服务器根目录的路径。