Vue 图片加载失败，出现裂图或闪图

最新推荐文章于 2024-04-16 15:00:00 发布

别派小狗去暗鲨

最新推荐文章于 2024-04-16 15:00:00 发布

阅读量1.7k

点赞数 1

文章标签： vue.js 前端 html5

本文链接：https://blog.csdn.net/m0_46403770/article/details/127867139

版权

**解决方法：**为img标签添加onerror处理

          <img
            :src="'http://' + scope.row.facePhoto"
            alt=""
            onerror="this.onerror='';this.src='img/userphoto.png'"
          />

注意：图片需放在public文件夹下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

别派小狗去暗鲨

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue 图片加载失败，出现裂图或闪图

Vue裂图、闪图
复制链接

扫一扫

上传图片（Element + Vue）

01-07

{ label: 订单资源, prop: ossName, type: upload, dataType: 'string', accept: image/jpeg, width: 80px, loadText: '附件上传中，请稍等', listType: 'picture-card', multiple: true, limit: 10, tip: '只能上传jpg/png文件', propsHttp: { res: 'data', url: 'link', }, rules: [{ req

基于vue 动态加载图片src的解决方法

08-28

基于vue 动态加载图片src的解决方法一、 Vue 中的动态加载图片src问题在 Vue 项目中，动态加载图片src是一个常见的问题。当我们使用 Vue 编写项目时，经常会遇到图片加载不出来的问题，特别是在使用 webpack ...

参与评论您还未登录，请先登录后发表或查看评论

在 Vue 2 中动态赋值 img 标签的 src 属性时显示为图裂

热门推荐

timeless的博客

03-23

2万+

在使用vue时会出现加载渲染页面时闪烁，一般有以下两个情况： 1.使用了{{}},解决方案使用v-bind 2.使用v-if，出现原先要隐藏的元素先出现然后在隐藏从而造成了闪烁的问题。以上两个问题都可以使用以下的方案来解决。在css中定义 [v-cloak] { display:none; } 在v-if中加上v-cloak即可解决.

vue破图处理

xiaohuli_hyr的博客

09-08

2530

问题描述按道理前端拿到接口返回的图片地址，直接进行显示，若该图片已经不存在或者被损坏，则会导致前端以“破图”方式显示。例如：但是现目前的需求是，若出现“破图”则采用系统默认的图片显示。解决方法故此需要更改其代码，实现该功能。因为 img出现破图，则会触发error事件，则我们可以对该事件，进行src配置。代码如下： <img :src="base_apiUrl+item.articleImage" @click="goNewsDetails(item)" @error.once="mo

vue图片加载失败时用默认图片替换的方法

10-16

在Vue.js应用中，处理图片加载失败的情况是常见的需求，特别是在提供用户界面时，确保即使图片资源出现问题，也能保持良好的用户体验。本篇文章将详细介绍如何在Vue中实现图片加载失败时用默认图片进行替换。首先...

解决Vue动态加载本地图片问题

10-16

在Vue.js应用中，动态加载本地图片是一种常见的需求，特别是在处理数据量较大的列表或轮播图等场景。本文将详细讲解如何解决Vue中动态加载本地图片的问题，以及两种不同的实现方式。首先，我们遇到的问题是当尝试...

vue图片加载与显示默认图片实例代码

08-31

然而，在图片加载过程中，用户可能会遇到图片加载失败或加载缓慢的问题。这时，显示默认图片可以提高用户体验。因此，实现图片加载与显示默认图片的功能是非常必要的。 Vue图片加载与显示默认图片的实现在Vue.js...

vue3使用element组件中的Image导致频闪

l_tutou的博客

11-23

568

vue3使用element组件中的Image导致频闪

vue动态加载图片问题

fresh_nam的博客

03-16

3534

vue动态加载图片问题

【Vue】—解决页面图片加载抖动的问题

道阻且长，行则将至。

09-11

1084

【Vue】—解决页面图片加载抖动的问题问题如下解决办法 overflow:hidden; height:0; padding-bottom:*; // 其中*处填图片的高宽百分比=高/宽*100% 解决之后

vue3裂图局部自定义指令

m0_69335214的博客

03-12

244

【代码】vue3裂图局部自定义指令。

(css)vue项目部署上线后图片不正常显示

nyf_unknow的博客

06-17

600

(css)vue项目部署上线后图片不正常显示

vue img标签图片加载时闪烁

飞翔༒之翼

12-16

1796

加载时在图片正常显示之前还是会显示加载出错的默认图片。因为此时的img_url为空所以就在父元素加上。初次加载闪烁然后在父元素添加了v-cloak。

vue里img图片路径加载失败原因

qq_52315656的博客

04-03

1755

也就是将img:require('../../assets/img/img.jpg')改为img：img.jpg就可以了。需要注意的，此时的../../assets/img/是路径名的前缀，而此时的img路径应该只是图片名字，就是直接将img设计为：img:require('../../assets/img/img.jpg')原因是直接放入的路径img:'../../assets/img/img.jpg'无法直接解析；

VUE项目初加载页面闪烁问题

Ride_The_Wind的博客

03-24

9363

一、前言写项目的会经常使用到v-if进行判断，但是因为加载或编译原因会导致页面最初加载的时候出现闪烁问题；二、解决办法使用v-cloak，我的理解是：只有编译没完成时才有，用了css将它隐藏，这样编译成功后才显示，所以解决了闪烁问题；大佬给出的解答是：v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。v-cloak 指令可以像css选择器一样绑定一套css样式然后这套css会一直生效到实例编译结束。用

VUE页面加载闪烁问题解决方法

rivernine的博客

09-01

4980

方案一: v-cloak v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。 v-cloak 指令可以像css选择器一样绑定一套css样式然后这套css会一直生效到实例编译结束。在闪烁元素的最外层添加上一个v-cloak <ul v-cloak> <li v-for="(item, index) in 10" :key="index">...

vue 检测图片加载失败

03-09

可以使用v-on:error指令来检测图片加载失败，例如：在Vue实例中定义handleError方法来处理加载失败的情况。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交