关于 vue项目中safari浏览器下img标签中路径错误时的渲染问题

最近在做vue项目中,遇到通过请求到的数据循环渲染图片的问题,具体情况如下:

Google浏览器中是这样:
在这里插入图片描述

  • 后来我做了处理,当一组数据中的图片的url地址没有时,只渲染有的,没有的用默认的背景图片,这里判断我用的v-show
<img v-show='track.imageUr' :src="track.imageUrl"  :alt="`${track.title} 앨범 커버`" />
  • 但是发现在Google中,没有问题。而在safari浏览器中,如下图的情况
    在这里插入图片描述
  • 后来发现是图片路径有,但是在404的情况,也就是图片路径错误,这种情况下,safari还是会默认渲染一个img标签,这就会出现上面的情况,所以为了更完善的处理这种情况,让图片路径没有时或者图片路径有但是错误的时候,应该用默认背景图片。于是我再次修改代码如下:
    html部分:
<img v-show='track.imageUrl' :src="track.imageUrl" @error='onError($event)' :alt="`${track.title} 앨범 커버`" />

js部分

onError(event) {
      event.target.src ="默认的图片地址" ;
    },

最后问题解决了,没有上面的情况了
在这里插入图片描述

发布了30 篇原创文章 · 获赞 9 · 访问量 2505

猜你喜欢

转载自blog.csdn.net/weixin_42446516/article/details/103399461
今日推荐