vue + 图片加载 + 默认图片

╰+哭是因爲堅強的太久メ 2022-03-10 18:20 608阅读 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 条评论，608人围观）

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

相关阅读

相关 vue加载网络图片

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

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

相关 vue项目中图片加载不到时，使用默认图片替换

vue项目中图片加载不到时，使用默认图片替换解决方法： ①使用三目运算符 ②使用onerror <img :src="item

我就是我/ 2023年07月24日 02:21/ 0 赞/ 111 阅读

相关 vue实现图片懒加载

vue实现图片懒加载图片懒加载就是当数据没有加载出来的时候先留出一个图片的位置，等待数据的加载完之后渲染出来，大概就是占位等待图片加载完毕渲染 1.需要安装插件 vue-

╰+攻爆jí腚メ/ 2023年06月22日 10:28/ 0 赞/ 37 阅读

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

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

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

相关 vue图片懒加载

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

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

相关 vue-lazyload 图片懒加载

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

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

相关 vue 图片懒加载

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

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

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

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

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

相关 vue图片懒加载

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

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

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

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

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