本文实例为大家分享了vue3.x使用swiperUI动态加载图片失败的具体解决方法，供大家参考，具体内容如下 版本号： vue/cli：4.5.12 swiper：^6.8.4 问题 1、动态加载图片，但是动态加载图片为空
本文实例为大家分享了vue3.x使用swiperUI动态加载图片失败的具体解决方法，供大家参考，具体内容如下
版本号：
vue/cli：4.5.12
swiper：^6.8.4
问题
1、动态加载图片，但是动态加载图片为空，需要显示默认图片时使用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 :src="item.picUrl" alt="" /> </div> </div> <img v-else src="~@/assets/images/img_001.png" alt="" /> </div>
2、动态加载图片，图片存在时，显示默认图片使用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 src="~@/assets/images/img_001.png" alt="" /> </div> </div> </div> </template> <img v-else 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
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。