如何从React.js中的json修复本地路径？

Question

如何修复从Json到React组件渲染的本地路径，

我在整个互联网上搜索答案，但是没有运气:(

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产品扩展了React.Component {构造函数（props）{超级属性（props）}

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 >
    )
}

}

Answer 1

由于我不确定您是否使用Webpack来提供图像。 我假设您不是，这是从public目录提供图像的基本方法。

结构如下：

public
|-assets
    |-pictures
       |-219.jpg
|-src
    |-myImgs.json
    |-App.js

json文件：

  {
        "name": "Apple",
        "id": "001",
        "price": "$995",
        "imgUrl": "./pictures/219.jpg"
  }

App.js

import React from 'react';
import myImgs from './myImgs.json'

class App extends React.Component {
...
render() {
  return(
   <>
     <img src={myImgs.imgUrl} alt={myImgs.name} />
   </>
  )
 };
...
};