实现效果

1.图片未加载完看到的是 .new-img占位背景图片,.new_back透明度设置0;
2.图片加载失败显示设置的 loadImg 失败占位图片
3.图片加载完直接显示完整图片同时添加类名. loaded透明度设置1;

数据结构

        <!-- 数据列表 -->
        <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: [],//数据
                loadImg: "../../../static/errorImage.jpg"//失败加载图片
              }
            },
            methods: {
                //监听image加载完成
                onImageLoad(key, index) {
                  this.$set(this[key][index], 'loaded', 'loaded');
                },
                //监听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;
                    }
                }
            }