vue3.x使用swiperUI动态加载图片失败如何解决

这篇文章主要讲解了“vue3.x使用swiperUI动态加载图片失败如何解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue3.x使用swiperUI动态加载图片失败如何解决”吧！

版本号：

vue/cli：4.5.12
swiper：^6.8.4

问题

动态加载图片，但是动态加载图片为空，需要显示默认图片时使用v-if失效

<div class="swiper-container home_swiper">    <div class="swiper-wrapper" v-if="aImages.length > 0">        <div class="swiper-slide" v-for="(item,index) in aImages" :key="index">            <img :class="lazy" data-src="item.picUrl" alt="" />        </div>    </div>    <img v-else class="lazy" data-src="~@/assets/images/img_001.png" alt="" /></div>

动态加载图片，图片存在时，显示默认图片使用v-if会造成dom节点不刷新

<template v-if="aImages.length > 0">    <div class="swiper-container home_swiper">        <div class="swiper-wrapper">            <div class="swiper-slide" v-for="(item,index) in aImages" :key="index">                <img class="lazy" data-src="~@/assets/images/img_001.png" alt="" />            </div>        </div>    </div></template><img v-else class="lazy" data-src="默认图片" alt="" />

解决方案

动态获取图片数据，图片不存在时，将默认图片存入即可，不使用v-if进行判断

// 部分代码import {    ref,    nextTick} from 'vue';import {    apiImgList} from '@/api/home';// 默认图片import defaultBg from "@/assets/images/img_001.png";export default {    setup() {        const aImages = ref([]);        // 获取图片列表        const fGetImgList = () => {            apiImgList().then(res => {                aImages = res.result && res.result.length ? res.result : [{                    picUrl: defaultBg                 }];                nextTick(() => {                    fInitSwiper();                });            }).catch(() => {                aImages = [{                    picUrl: defaultBg                 }];                nextTick(() => {                    fInitSwiper();                });            })        };        const fInitSwiper = () => {            new Swiper(".home_swiper", {                //循环                loop: true,                //每张播放时长3秒，自动播放                spaceBetween: 16,                // 切换效果                 effect: "coverflow",                // 该选项给Swiper用户提供小小的贴心应用，设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。                grabCursor: true,                // 设定为true时，active slide会居中，而不是默认状态下的居左。                centeredSlides: true,                // 设置slider容器能够同时显示的slides数量(carousel模式)。                slidesPerView: 1.32,                // 启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。默认false，不开启，可以使用update()方法更新。                observer: true,                observeParents: true,                observeSlideChildren: true,                // 自动切换                autoplay: {                    // 自动切换的时间间隔                    delay: 3000,                    // 如果设置为true，当切换到最后一个slide时停止自动切换                    stopOnLastSlide: false,                    // 用户操作swiper之后，是否禁止autoplay。默认为true：停止                    disableOnInteraction: false,                },                // 类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式                coverflowEffect: {                    // slide做3d旋转时Y轴的旋转角度                    rotate: 0,                    // 每个slide之间的拉伸值，越大slide靠得越紧。5.3.6 后可使用%百分比                    stretch: -70,                    // slide的位置深度。值越大z轴距离越远，看起来越小。                    depth: 500,                    // depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。                    modifier: 1,                    // 是否开启slide阴影                    slideShadows: true,                }            });        };        return {            aImages        }    }        }

感谢各位的阅读，以上就是“vue3.x使用swiperUI动态加载图片失败如何解决”的内容了，经过本文的学习后，相信大家对vue3.x使用swiperUI动态加载图片失败如何解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！