vue3.x使用swiperUI動態加載圖片失敗的解決方法

<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>

<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="" />

// 部分代碼
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
        }
    }
        
}