vue.js - vue的图片绑定数据，在图片无法显示时会显示一张默认图片如何实现？

问题描述

问 题

用angular绑定数据里的图片，在图片无法显示时会显示一张默认图片，来保持页面一致性，代码这么写<img ng-src="{{details.imgUrl}}" src="/res/img/no.jpg"/>，但是用vue时，这样写绑定数据的图片，
<img src="{{value.imgUrl}}" >src已经被占用了，如何写绑定图片无法显示时的默认图片呢？就是angular上个代码里的src="/img/no.png"要怎么写？

解决方案

其實不必用得太複雜，可以用 純CSS 搞定：

<!-- 一張壞掉的圖片(?) -->
<img src="broken.png" alt="">

img {
  position: relative;
}

img:after { 
  content: url('替代圖片');
  display: block;
  position: absolute;
  // 底下幾行是故意要滿版並且背景填滿擋住底下那個很醜的加載失敗圖片(包子)
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

會這樣使用是因為 img 標籤的一些特性：

1. img 是個比較特殊的標籤，和 video 一樣具有被替代的特性，所以當圖片加載成功時，原先定義的偽類會失去作用不顯示。

2. alt 屬性會在圖片加載失敗時出現 (替代文字) ，這時偽類就會起作用了。

所以我們就可以利用再加載失敗後，偽類才會出現的特性來達成想要的效果。

这篇关于vue.js - vue的图片绑定数据，在图片无法显示时会显示一张默认图片如何实现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！