使用 React 从 Json 传递图像名称

Question

大家好，我正在尝试使用 React 显示 JSON 数据。除了图像名称之外，来自 Json 的所有数据都显示没有任何问题。你能告诉我我哪里错了吗？

Json 文件和图像在同一个目录中，因此我认为 img src="../banana.jpg" 可以。

这是我的 js 文件

import React, { Component } from 'react'
import ProductInfo from '../plist.json'

class Products extends Component {

  render() {
    return (
      <div>
        {ProductInfo.map((postDetail, index) => {
          return (
            <div>
              <div class="container">
                <div class="row">
                  <div class="col-lg-4">
                    <h1>{postDetail.name}</h1>
                    <p>{postDetail.price}</p>
                    <p>{postDetail.description}</p>
                    <img src="../{postDetail.image}" alt="Product Image"/>
                  </div>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    )
  }
}

export default Products

这里是 Json 文件

[
   {
      "name":"Banana",
      "price":"3,99",
      "description":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.",
      "image":"banana.jpg",
      "profileUrl":"#"
   },
     {
      "name":"Apple",
      "price":"1,99",
      "description":"Sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
      "image":"apple.jpg",
      "profileUrl":"#"
}
]

这里是我遇到的错误

Answer 1

尝试要求图像，它会告诉 webpack 或任何捆绑器使用图像计数

<img src={require(`../${postDetail.image}`)} />

我的猜测是你正在指向文件 ../banana.jpg，一旦你捆绑了你的程序，它就不存在了。