vue3.x使用swiperUI動態(tài)加載圖片失敗如何解決

這篇文章主要講解了“vue3.x使用swiperUI動態(tài)加載圖片失敗如何解決”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue3.x使用swiperUI動態(tài)加載圖片失敗如何解決”吧！

版本號：

vue/cli：4.5.12
swiper：^6.8.4

問題

1、動態(tài)加載圖片，但是動態(tài)加載圖片為空，需要顯示默認(rèn)圖片時使用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、動態(tài)加載圖片，圖片存在時，顯示默認(rèn)圖片使用v-if會造成dom節(jié)點(diǎn)不刷新

<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="默認(rèn)圖片" alt="" />

解決方案

動態(tài)獲取圖片數(shù)據(jù)，圖片不存在時，將默認(rèn)圖片存入即可，不使用v-if進(jìn)行判斷

// 部分代碼
import {
    ref,
    nextTick
} from 'vue';
import {
    apiImgList
} from '@/api/home';
// 默認(rèn)圖片
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", {
                //循環(huán)
                loop: true,
                //每張播放時長3秒，自動播放
                spaceBetween: 16,
                // 切換效果 
                effect: "coverflow",
                // 該選項給Swiper用戶提供小小的貼心應(yīng)用，設(shè)置為true時，鼠標(biāo)覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀。
                grabCursor: true,
                // 設(shè)定為true時，active slide會居中，而不是默認(rèn)狀態(tài)下的居左。
                centeredSlides: true,
                // 設(shè)置slider容器能夠同時顯示的slides數(shù)量(carousel模式)。
                slidesPerView: 1.32,
                // 啟動動態(tài)檢查器(OB/觀眾/觀看者)，當(dāng)改變swiper的樣式（例如隱藏/顯示）或者修改swiper的子元素時，自動初始化swiper。默認(rèn)false，不開啟，可以使用update()方法更新。
                observer: true,
                observeParents: true,
                observeSlideChildren: true,
                // 自動切換
                autoplay: {
                    // 自動切換的時間間隔
                    delay: 3000,
                    // 如果設(shè)置為true，當(dāng)切換到最后一個slide時停止自動切換
                    stopOnLastSlide: false,
                    // 用戶操作swiper之后，是否禁止autoplay。默認(rèn)為true：停止
                    disableOnInteraction: false,
                },
                // 類似于蘋果將多首歌曲的封面以3D界面的形式顯示出來的方式
                coverflowEffect: {
                    // slide做3d旋轉(zhuǎn)時Y軸的旋轉(zhuǎn)角度
                    rotate: 0,
                    // 每個slide之間的拉伸值，越大slide靠得越緊。5.3.6 后可使用%百分比
                    stretch: -70,
                    // slide的位置深度。值越大z軸距離越遠(yuǎn)，看起來越小。
                    depth: 500,
                    // depth和rotate和stretch的倍率，相當(dāng)于depth*modifier、rotate*modifier、stretch*modifier，值越大這三個參數(shù)的效果越明顯。
                    modifier: 1,
                    // 是否開啟slide陰影
                    slideShadows: true,
                }
            });
        };
        return {
            aImages
        }
    }
        
}

感謝各位的閱讀，以上就是“vue3.x使用swiperUI動態(tài)加載圖片失敗如何解決”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對vue3.x使用swiperUI動態(tài)加載圖片失敗如何解決這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！