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

最新推荐文章于 2023-09-10 22:21:43 发布

前端61

最新推荐文章于 2023-09-10 22:21:43 发布

阅读量661

点赞数

分类专栏： web前端文章标签：前端图片默认图图片失效前端默认图

本文链接：https://blog.csdn.net/qq_43327305/article/details/118216178

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

<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;
            }