React项目中引入图片

一、场景描述

当我们在react项目中使用img标签时，活着style中使用背景图片时，直接使用相对路径会无法引入图片。
例如：

<img width="100" height="100" src="./../../../../asset/img/user.png" alt="" className={'user-img'}/>

二、import

我们可以像引入模块一样引入图片

import img from './../../../../asset/img/user.png'

然后直接将引入后的值赋给src即可

<img width="100" height="100" src={img} alt="" className={'user-img'}/>

三、require

我们也可以将相对路径用require包裹之后直接赋给src，就像在vue中一样。

<img width="100" height="100" src={require('./../../../../asset/img/user.png')} alt="" className={'user-img'}/>

**注意：**这里有个问题，因为file-loader库的版本不同，这里有些细微差别。高版本的file-loader库esModule默认为true，require返回一个ES模块而不是字符串路径。而这个ES模块的default属性为字符串路径，所以应该这样写：

<img width="100" height="100" src={require('./../../../../asset/img/user.png').default} alt="" className={'user-img'}/>

我们也不要去纠结我们的file-loader版本到底是多少，当我们直接使用require还是无法正常显示图片的时候，我们在require后面加个.default即可