React项目中引入图片

最新推荐文章于 2023-12-11 22:33:39 发布

程序员的脱发之路

最新推荐文章于 2023-12-11 22:33:39 发布

阅读量1w

点赞数 6

分类专栏： react学习笔记文章标签： react

本文链接：https://blog.csdn.net/weixin_43845090/article/details/117411171

版权

2 篇文章 0 订阅

订阅专栏

一、场景描述

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

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

在这里插入图片描述

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

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

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

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

在这里插入图片描述

我们也可以将相对路径用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即可
在这里插入图片描述

关注