如何在 React.js 中从 json 给出相对本地路径？答案

【问题标题】：How to give relative local path from json in React.js?如何在 React.js 中从 json 给出相对本地路径？
【发布时间】：2019-08-16 18:48:52
【问题描述】：

如何使用从 Json 到我的 React 组件渲染的本地路径，

<img src={this.props.imgUrl}/>。我在互联网上搜索了答案，但没有运气:(

NOT WORKING :(
[
    {
        "name": "Apple",
        "id": "001",
        "price": "$995",
        "imgUrl": "./Pictures/219.jpg"
    }
]

WORKING, BUT TURTLE SPEED :/
[
    {
        "name": "Apple",
        "id": "001",
        "price": "$995",
        "imgUrl": "http://www.placekitten.com/200/200"
    }
]

从“反应”导入反应类产品扩展 React.Component { 构造函数（道具）{ 超级（道具） }

render() {
    return (
        <div>
            <img src={this.props.imgUrl} />
            <p>Name: {this.props.name}</p>
            <p>Id: {this.props.id}</p>
            <p>Price: {this.props.price}</p>
        </div >
    )
}

}

【问题讨论】：

它可能引用了错误的目录。如果图像通过 URL 正确显示，则您的渲染很好。您还没有告诉我们有关您的服务器或设置的任何信息，因此无法调试
能否提供项目的文件层次结构，尤其是图片和当前组件？
感谢您的回复，图片是存放许多jpg文件的文件夹，它位于根组件。你指的是什么组件？

标签： json reactjs

【解决方案1】：

试试这个， “imgUrl”：“文件：/Pictures/219.jpg” 代替 "imgUrl": "./Pictures/219.jpg"

还要确保你给出了绝对路径。

【讨论】：

感谢您的建议。不走运，图片没有显示出来。
感谢您的回复。它仍然无法正常工作。图片不显示。我必须在 webpack.config 文件中进行配置吗？
看看这个链接stackoverflow.com/questions/42854494/…。它应该会有所帮助。

【解决方案2】：

我通常的做法是，如果图片是本地的，我不包括 imageurl，而是通过按资产名称搜索 public/assets 来做到这一点。我为你准备了小codesandbox。

【讨论】：