首页 > 解决方案 > 如何在 React.js 中从 json 给出相对本地路径?

问题描述

我如何使用从 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' 类中导入 React 产品扩展 React.Component { constructor(props) { super(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 >
    )
}

}

标签: jsonreactjs

解决方案


试试这个,“imgUrl”:“file:/Pictures/219.jpg”而不是“imgUrl”:“./Pictures/219.jpg”

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


推荐阅读