前端网络图片url失效添加默认图

现在网页中图片随处可见，但避免不了有时会出现图片资源失败的情况，在浏览器中就会这样显示

<img class="img" :src="url">

这种情况下 url 存在，只是失效不能加载出图片，所以不能使用v-if判断的方式

针对这种情况，我们可以使用伪元素的方式来解决：

我们可以用伪元素来实现一个默认提示效果

			.img {
              width: 80px;
              height: 80px;
              position: relative;
            }
            .img::after{
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              width: 100%;
              height: 100%;
              background: url('/img/goods/example.png');
              background-size:80px 80px;
              background-repeat:no-repeat;
            }
            

实现效果：

正常图片仍然可以正常显示

前端进阶精选：点此去