vue + 图片加载 + 默认图片

需求：

图片数据未返回 + 图片数据返回为空 + 图片加载出错时，图片采用默认图片展示。

解决：
先判断返回数据是否有，再通过img 的 load事件判断是否加载完成。

现象：

图片会先加载默认图片，等到请求的图片加载完成替换默认图片。
注意：
代码中 1 至 2 处是必须使用 v-show，若使用 v-if ，其中一个图片无效时，DOM中img标签则会全部为默认图片的img标签。

<template>
<div v-for="(activeItem, activeIndex) in activityList" :key="activeIndex">
<div class="img-wrap"><!-- 1 --><img :src="imgUrl + activeItem.Banner + '_0x0'" @load="activityLoad (activeItem.Banner, activeIndex)" v-show="activeItem.Banner && loadingImges[activeIndex]"><img :src="loadingImgSrc"v-show="!activeItem.Banner || !loadingImges[activeIndex]"><!-- 2 -->
</div>
</template><script>
const loadingimg = require('../assets/images/category/banner1.png')export default {data () {return {activityList: [],loadingImges: {},loadingImgSrc: loadingimg,}},methoeds: {activityLoad (imgId, imgIndex) {if (imgId) {this.loadingImges[imgIndex] = true;}},getList () {//获取到图片数组id，拼接为src}}}</script>

vue + 图片加载 + 默认图片相关推荐

图片加载失败后---加载默认图片
一 . 图片加载失败原因: 文件路径不正确: 标签属性等元素错误: 错误的文件扩展名文件丢失存放位置出现问题网络传输问题: 二 . 加载失败后页面默认样式如下 ↓: 三 . 封装函数:图片加载 ...
vue 动态获取的图片路径不显示_解决Vue动态加载本地图片问题
最近遇到了个问题,用v-bind动态绑定img的src,图片加载不出来.控制台显示src是有获取到图片地址的,可是就是加载不出来. 最后才发现原因原来是浏览器中直接显示'./img/img1.png' ...
【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )
文章目录一.加载网络图片二.加载静态图片三.加载本地图片四.完整代码示例五.相关资源一.加载网络图片参考 [Flutter]Image 组件 ( Image 组件简介 | Image 构 ...
加载默认图片，如何避免img标签陷入onerror事件死循环
当图片加载失败的时候,我们可以利用onerror事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环. 为了避免死循环的情况,我们可以在执行完onerror事件 ...
android地图图片加载,Android图片加载解析之Bitmap
写在前面的话,本篇文章是参考自<Android开发艺术探索>所写,看此书已是2015年的事情啦,由于独立开放项目,以至于对于Android原理性东西生疏,最近需要换工作,重新捡起此书,仍有 ...
Vue 动态加载public图片和图片预览例子
一.vue 静态资源文件夹 Vue 有两个存放静态资源的文件夹:assets和public. 1. assets文件夹使用require()方法加载静态资源,如: require('./assets ...
angularjs 图片加载失败时,加载默认图片
app.directive('errSrc', function () { return { link: function (scope, element, attrs) { element.bind ...
vue图片不存在时加载默认图片
在文件中的img那里添加:οnerrοr="errorImg01",然后设置errorImg01的路径如果直接写成 errorImg01: ('../../assets/image ...
htmlimg图片加载失败_动态加载图片失败的默认图显示
经常碰到这类场景,动态加载图片时,因为一些原因(图片链接不存在啊,图片误删啊,图片路径不对或图片路径为空等等)导致真实图片显示不出来.那么为了提高用户体验,都会显示一个默认图. 动态加载图片失败时,显 ...

vue + 图片加载 + 默认图片

vue + 图片加载 + 默认图片相关推荐

最新文章

热门文章