react 图片的引入方式

import Banner from './imgs/Home_banner.png';
<img src={Banner} />

<img src="***.jpg" />



以上两种引入图片的方法有什么不同?哪一种做法比较好?

第一种引入方式,webpack把当前图片当做资源文件打包,你可以在配置文件里面设置图片加载器,小与多少kb已base64码的格式打包,当大于某个kb大小的时候,webpack会把当前图片也变编译到你的你的打包目录下面。

第二种引入方式,你在css文件里面可以引用,因为css-loader会把资源文件一起打包,而在js中这样引入,webpack只会当前的src当做字符串,并不会当做资源文件去处理,这样当你的代码一旦打包到线上就会出现图片文件路径找不到的问题。 以上,大概就是这两种引入方式的区别

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值