img 图片找不到时,设置显示默认图片

最开始的 img

<img src="image/people.png" style="width: 100px;height: 100px;">
<img src="image/default.png" style="width: 100px;height: 100px;">

图片找不到时,界面上会显示图片裂开了

<img src="image/people1.png" style="width: 100px;height: 100px;">

image-20210706141917308


这时候,我们想避免这种情况,当图片找不到时,显示一张默认图片

<img src="image/people1.png" onerror="this.src='image/default.png';" 
     style="width: 100px;height: 100px;">

可以看到,图片加载出错时,会调用 onerror,将图片的 src 设置成默认图片的 src 。


图片能找到时,也能够正常显示

<img src="image/people.png" onerror="this.src='image/default.png';" 
	style="width: 100px;height: 100px;">
image-20210706142500802

但是当图片加载出问题,默认图片也出问题时,会死循环

<img src="image/people1.png" onerror="this.src='image/default1.png';" 
     style="width: 100px;height: 100px;">
image-20210706142828055

更改 onerror 设置即可解决死循环问题

<img src="image/people1.png" onerror="this.src='image/default1.png';this.onerror=null;" 
     style="width: 100px;height: 100px;">
image-20210706143431510

所以,最终的方法就是

<img src="图片的url" onerror="this.src='默认图片的url';this.onerror=null;">

  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
当使用webpack5,可能会出现在.css文件中的图片路径无法到的问题。这是因为在webpack5中,引入图片的方式发生了变化。 在之前的版本中,我们可以直接在.css文件中使用相对路径来引入图片。但是在webpack5中,除非使用绝对路径,否则默认情况下无法正确解析路径。 解决这个问题的方法有两种: 1. 使用绝对路径:在.css文件中使用绝对路径来引入图片,可以确保路径的正确解析。例如,如果图片位于项目根目录下的img文件夹中,可以这样引入:background-image: url(/img/example.jpg); 2. 配置webpack的文件解析规则:在webpack的配置文件中,可以通过配置resolve.alias来解决路径问题。例如,如果图片位于项目根目录下的img文件夹中,可以这样配置resolve.alias: ```javascript module.exports = { //... resolve: { alias: { '@img': path.resolve(__dirname, 'img') } } }; ``` 然后在.css文件中使用别名来引入图片:background-image: url('@img/example.jpg'); 无论使用哪种方法,都需要确保图片路径的正确性。此外,还需要注意webpack5使用的是asset模块,需要在配置文件中正确设置相关的loader,以便正确处理图片文件。 总之,针对webpack5中.css样式图片路径不到的问题,可以通过使用绝对路径或配置resolve.alias来解决。同,确保正确配置相关的文件解析规则和loader,以便正确处理图片文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Aries66666

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值