React引用本地图片

最近在学React，遇到了个比较神奇的坑，就是引入本地图片的问题。图片文件是放在public/assets文件夹中，然后在js文件中引用这个图片，发现竟然报错！

const RenderImage = ()=>{
    return (
        <React.Fragment>
            <img src='../public/assets/WechatIMG316.jpeg'></img>
        </React.Fragment>
    )   
}

最后查看了官网，发现React不能这样直接引用本地图片，官方提供了几种方法：

方法一：import引入

import引入图片相比引用public文件夹里的图片会经过webpack的处理，如果导入小于10,000字节的图像将返回数据URI而不是路径，这样有利于减少对服务器的请求数。这适用于以下文件扩展名：bmp，gif，jpg，jpeg和png。SVG文件被排除在外。

import Pic from './assets/WechatIMG316.jpeg';

const RenderImage = ()=>{
    return (
        <React.Fragment>
            <img src={Pic}></img>
        </React.Fragment>
    )   
}

方法二：require方法

require里只能写字符串，不能写变量。

const RenderImage = ()=>{
    return (
        <React.Fragment>
            <img src={require('./assets/WechatIMG316.jpeg')}></img>
        </React.Fragment>
    )   
}

背景图片引入的方法

class Wrap extends React.Component{
    render(){
        let styleObject = {
            width:"100px",
            height:"100px",
            backgroundImage:`url(${require('./assets/WechatIMG316.jpeg')})`,
            backgroundSize:'cover'
        }
        return (
            <React.Fragment>
                <div style={styleObject}></div>
            </React.Fragment>
        )
    }
}

转载于:https://www.jianshu.com/p/86f8a5183fa0