vue + 图片加载 + 默认图片
需求:图片数据未返回 + 图片数据返回为空 + 图片加载出错 时,图片采用默认图片展示。解决:先判断返回数据是否有,再通过img 的 load事件判断是否加载完成。现象:图片会先加载默认图片,等到请求的图片加载完成替换默认图片。注意:代码中 1 至 2 处是必须使用 v-show,若使用 v-if ,其中一个图片无效时,DOM中img标签则会全部为默认图片的img标签。...
·
需求:
图片数据未返回 + 图片数据返回为空 + 图片加载出错 时,图片采用默认图片展示。
解决:
先判断返回数据是否有,再通过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>
更多推荐
已为社区贡献6条内容
所有评论(0)