【react】在create-react-app项目中使用图片路径的三种方式，亲测有效

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/AC_greener/article/details/87935756

1.

引入图片：import imgUrl from ‘…/src/a.jpg’,

render() {
        return (
            <div  >
                <img src={imgUrl } />  
            </div>
            );
    }

2.

利用webpack：

render() {

        return (
            <div >
                <img src={require('../src/img/a.jpg')} />  
            </div>
            );
    }

需要注意的是前两种方式只能通过绝对路径来引入图片

3，当需要用axios动态获取本地图片的src时，必须使用绝对路径，在create-react-app项目中绝对路径访问的是public目录下的文件，所以avatar1.jpg直接放在public下面就可以了

json如下：

{
    "success": "true",
    "data": [{
        "id": "1",
        "date": "Feb 24，2019",
        "imgUrl": "/avatar1.jpg"
    }]
}

拿到路径之后可以这样使用(结合了redux)：

render() {
        return (
            <div  >
                <img src={this.props.imgUrl } />  
            </div>
            );
    }