實(shí)現(xiàn)效果

1.圖片未加載完看到的是 .new-img占位背景圖片,.new_back透明度設(shè)置0;
2.圖片加載失敗顯示設(shè)置的 loadImg 失敗占位圖片
3.圖片加載完直接顯示完整圖片同時(shí)添加類名. loaded透明度設(shè)置1;

數(shù)據(jù)結(jié)構(gòu)

        <!-- 數(shù)據(jù)列表 -->
        <view class="new_list-a flexbox justify-content-b align-items-c flex-wrap">
            <view class="new-child" v-for="(item,index) in newData" :key="index" @click="GoodsDetails(item)">
                <!-- 圖片 -->
                <view class="new-img">
                    <image :src="item.image" class="new_back" :class="[item.loaded]" mode="aspectFill" lazy-load @load="onImageLoad('newData', index)"
                     @error="onImageError('newData', index)"></image>
                    <image :src="item.countryImg" lazy-load mode="scaleToFill" class="new_flag"></image>
                </view>
                <view class="new_p-a">{{item.categoryName1}}</view>
                <view class="new_p-b">{{item.categoryName2}}</view>
                <view class="colorh2D">{{$t('home.home52')}} {{item.nowPrice | setMoney2(item.unit)}}</view>
            </view>
        </view>

js部分

            data() {
              return {
                newData: [],//數(shù)據(jù)
                loadImg: "../../../static/errorImage.jpg"http://失敗加載圖片
              }
            },
            methods: {
                //監(jiān)聽image加載完成
                onImageLoad(key, index) {
                  this.$set(this[key][index], 'loaded', 'loaded');
                },
                //監(jiān)聽image加載失敗
                onImageError(key, index) {
                  this[key][index].image = this.loadImg;
                },
            }   

樣式部分

          .new-img {
                width: ((48 / 375) * 750)+rpx;
                height: ((48 / 375) * 750)+rpx;
                display: inline-block;
                position: relative;
                background: url("../../../static/loadYimg.jpg") no-repeat center;
                background-size: 100%;
                border-radius: 50%;
                overflow: hidden;
                .new_flag {
                    width: ((16 / 375) * 750)+rpx;
                    height: ((10.6 / 375) * 750)+rpx;
                    position: absolute;
                    bottom: ((4 / 375) * 750)+rpx;
                    right: 0;
                }
                .new_back{
                    width: 100%;
                    height: 100%;
                    transition: .2s;
                    opacity: 0;
                    &.loaded {
                        opacity: 1;
                    }
                }
            }