uniapp、Vue中 image 如何设置默认图片，图片地址加载失败（404）的话就显示默认图片

一、解决方法（在单层循环中）

HTML：
在image标签当中添加@error，用来监听图片地址加载失败，同时传递参数

<image v-else :src="item" mode="aspectFit" @error="imgerror($event, index)"></image>

JS：

imgerror(e, index) {  this.xiangqingUrl.splice(index, 1)this.xiangqingUrl.splice(index, 0, '/static/img/noimg.png')
},

单层结构默认图片可能因为数组长度没有发生改变，因此Vue不会更新数据，因此我们需要删除一个元素后再新增一个默认图片地址，使得Vue发生数据更新。

二、双层循环嵌套解决方法

HTML：
在image标签当中添加@error，用来监听图片地址加载失败，同时传递参数

<swiper-item v-for="(value , indexs) in item.phonts" :key="indexs" ><video v-if="value.indexOf('mp4') >-1" :src="value" controls></video><image v-else :src="value" mode="aspectFit" @error="imgerror($event, indexs,index)"></image>
</swiper-item>

JS：

imgerror(e, indexs,index) {var ps = JSON.parse(JSON.stringify(this.list[index].phonts))this.$set(this.list[index],this.list[index].phonts,[])ps[indexs] = '/static/img/noimg.png'this.list[index].phonts = ps
},

解释：因为vue的数据绑定存在一些问题，所以在双层遍历当中会出现数据更新问题，因此我们需要给图片数组重新更换地址
注：如果图片长度不改变，vue默认不会更新，所以我们要把数组赋值为空，然后重新赋值（默认图片地址）

uniapp、Vue中 image 如何设置默认图片，图片地址加载失败（404）的话就显示默认图片相关推荐

vue项目中 img标签加载失败(404)方法，@error事件
vue项目中 img标签加载失败方法,@error事件 @error="defImg" <img src="123" @error="defIm ...
html图片怎么预加载,如何利用CSS和Javascript实现图片预加载
说到图片预加载,想必大家已经很熟悉了,在平时的项目中,我们常用插件实现预加载,比如:懒加载lazyload插件等等.如果你想了解下lazyload,可以看下这两篇文章: 今天主要想介绍不用插件实现图片 ...
element ui 图片加载失败_解决Element UI - el-image 图片初始化加载失败问题
最近使用elementUI的el-image发现经常会出现加载src失败的情况,问题估计就是e-image的src路径一旦初始化加载失败的话就没有异步刷新,(这个地方需要注意过这个问题的大佬解读下源码 ...
解决IDEA加载多个项目（模块)时图片文件资源调用不出来的问题，new ImageIcon()图片相对路径加载失败的问题
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.分析问题二.解决步骤 1.采用绝对路径 2.改良相对路径前言提示:这里可以添加本文要记录的大概内容: IDE ...
img加载中显示loading，加载失败隐藏img并显示自定义内容而且可点击重新加载（React）
图片加载效果完整代码 import { useRef, useState } from 'react'; import './index.less';export default function ...
idea 设置加载多个资源文件,显示本地图片
idea 经常只会设置一个资源路径,这个路径就是项目的路径.但是当要加载的文件处于其他位置时,则需要增加虚拟路径的配置. 如图:第一个是项目路径第二个是图片路径转载于:https://www.cn ...
Vue踩坑之二级路由下静态资源加载失败
在使用vue开发过程中意外发现 , 当我的路由加到二级时我的页面背景突然没了? 这是怎么回事呢? 让我们先来复现一下问题吧起初我的登陆页面的路由是这样子的我的背景图片是在外部的一个css中写着的 ...
小程序加载网络图片404错误，使用默认图片替换
html引入本地css样式无效,vue在index.html里面引入css文件样式加载失败
问题描述我在vue的index.html里面引入本地的第三方CSS文件,浏览器会出现一个提示,同时样式也没有生效问题出现的环境背景及自己尝试过哪些方法网上搜索了一下说是什么拦截器的问题,但没有找 ...

uniapp、Vue中 image 如何设置默认图片，图片地址加载失败（404）的话就显示默认图片

uniapp、Vue中 image 如何设置默认图片，图片地址加载失败（404）的话就显示默认图片相关推荐

最新文章

热门文章