使用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文件，一旦您打包程序，该文件就不会存在。