图片加载失败，使用默认logo

前端小蔡姬

于 2023-01-11 15:39:33 发布

阅读量317

点赞数

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/x_nweBorder01k/article/details/128645765

版权

文章讲述了在前端展示图片时，如何处理后端返回的图片URL和本地固定的logo。当后端返回图片数据时，使用`van-image`组件展示，而如果图片缺失则显示默认logo。对于本地固定的logo，使用`img`标签并结合`@error`事件处理图片加载错误，显示默认图片。`getImageUrl`函数用于构建图片的完整URL。

摘要由CSDN通过智能技术生成

1、如果是使用后端返回的图片

          <div class="detail">
            <span class="detail_label">{{ $t("payLink.pamentMethod") }}</span>
            <span v-if="vaDetail.logo && vaDetail.logo != ''"
              ><van-image
                class="mt-4 mb-2"
                width="34"
                height="24"
                :src="vaDetail.logo"
                alt=""
            /></span>
            <span class="pr-3" v-else>
              <van-image
                class="mt-4 mb-2 ml-2 mx-auto"
                width="44"
                height="32"
                :src="require('@/assets/images/defaultLogo.png')"
                alt=""
              />
            </span>
          </div>

如果是本地写固定的logo，用name去匹配的情况

              <img
                class="pl-2"
                width="45"
                height="32"
                :src="getImageUrl(item.bank_code)"
                alt=""
                @error="defaultImgs()"
              />

使用img标签的@error事件

import defaultLogo from "@/assets/images/defaultLogo.png";

//图片出错展示默认logo
    defaultImgs() {
      let img = event.srcElement;
      img.src = defaultLogo;
      img.onerror = null; //防止闪图
    },
    getImageUrl(name) {
      return new URL(
        import.meta.env.BASE_URL + "images/" + name + ".png", //不支持require
        import.meta.url
      ).href;
    },