vue + 图片加载 + 默认图片

╰+哭是因爲堅強的太久メ 2022-03-10 18:20 454阅读 0赞

需求：

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

解决：  
先判断返回数据是否有，再通过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">
            
    		<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]"
    		>
            
    </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>

发表评论取消回复

表情：

评论列表（有 0 条评论，454人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue加载网络图片

在Vue.js中加载网络图片通常是通过<img>元素来完成的。你可以使用Vue的数据绑定来将图片的URL动态地绑定到<img>元素的src属性上。以下是一个简单的示例：首先

淩亂°似流年/ 2024年02月22日 01:57/ 0 赞/ 95 阅读

相关 vue指令处理图片加载错误，判断图片可否加载成功

vue指令处理图片加载错误，判断图片可否加载成功 v-real-img 指令全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img

超、凢脫俗/ 2022年11月17日 13:47/ 0 赞/ 594 阅读

相关当原图片加载失败时，如何让图片加载上我们默认给的图片

我们可能会遇到这样的问题，当页面中的图片的加载失败时，我们想要该图片加载我们给的默认的图片，我在这里分享一下几种做法，希望对大家有所帮助。 1、在img标签中加上 οnerr

曾经终败给现在/ 2022年06月17日 07:16/ 0 赞/ 253 阅读

相关 vue图片懒加载

vue做的项目，图片较多，都是直接引入的，每次打开主页加载比较慢。 ![Center][] 请求总共10.7M，只是图片就占了差不多9M，完成时间花了37秒，估计老板

矫情吗；*/ 2022年06月09日 13:08/ 0 赞/ 458 阅读

相关图片加载

[Android四大图片缓存（Imageloader,Picasso,Glide,Fresco）原理、特性对比][Android_Imageloader_Picasso_Gl

川长思鸟来/ 2022年06月08日 07:30/ 0 赞/ 331 阅读

相关 vue-lazyload 图片懒加载

第一步npm install vue-lazyload --save 然后在main.js里引入 import VueLazyLoad from 'vue-lazyload

布满荆棘的人生/ 2022年05月09日 08:03/ 0 赞/ 387 阅读

相关 vue 图片懒加载

安装、引用、配置三部曲 1、安装\` npm install vue-lazyload --save-dev 2、在main.js中引用 impor

傷城~/ 2022年04月23日 12:02/ 0 赞/ 435 阅读

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

需求：图片数据未返回 + 图片数据返回为空 + 图片加载出错时，图片采用默认图片展示。解决：先判断返回数据是否有，再通过img 的 load事件判断是否加载完成

╰+哭是因爲堅強的太久メ/ 2022年03月10日 18:20/ 0 赞/ 455 阅读

相关 vue图片懒加载

介绍： vue-lazyload主要应用于图片延迟加载。包含如下的特点：小巧轻便，功能强大，易于使用可以用于加载任何图像类型支持Vue 1.0和Vue 2.0

缺乏、安全感/ 2021年12月07日 09:59/ 0 赞/ 660 阅读

相关 vue图片加载失败使用默认图片，el-image支持懒加载，自定义占位、加载失败等

<template> <d2-container> <h3>image加载失败使用默认图片</h3> <img src=""

谁借莪１个温暖的怀抱￠/ 2021年07月26日 12:00/ 0 赞/ 2856 阅读