Vue js - 在找不到图像源时设置替代图像答案

【问题标题】：Vue js - Set alt image when image source not foundVue js - 在找不到图像源时设置替代图像
【发布时间】：2018-02-28 20:22:01
【问题描述】：

我在一个有产品列表的网站上工作。每个产品都有对应的图像。我将图像 url 绑定到 source 属性，如下所示。

<img :src="product.ImageUrl"/>

如果找不到图片，我想显示默认图片。

我在cshtml razor 语法中做如下（仅供参考）

onerror='this.onerror = null;this.src = "@Url.Content("~/images/photo-not-available.jpg")";'

如何在 Vue 中实现相同的功能？

【问题讨论】：

<img :src="" @error="aVueFunctionThatChangesTheSrc"> 甚至do it using CSS。
这行得通。谢谢！
酷，我已经回答了。

标签： javascript vue.js vuejs2

【解决方案1】：

您可以在 Vue 中使用 @error 设置 onerror 处理函数：

<img :src="" @error="aVueFunctionThatChangesTheSrc">

【讨论】：

【解决方案2】：

由于在纯 js 中像这样将 onerror 内联

<img :src="ImgUrl" onerror="this.src='http://example.com/default.jpg'"/>

对于 vue.js 我们可以替换它

<img :src="ImgUrl" @error="$event.target.src='http://example.com/default.jpg'"/>

【讨论】：

【解决方案3】：

我发现更改 @error 函数中的 src 会引发可怕的无限循环更新，导致屏幕闪烁等。我目前的解决方案是：

<span v-if="props.column.field === 'avatar'">
  <span v-if="props.row.avatar">
    <img alt="avatar" class="round-32" :src="`${props.row.avatar}`" @error="(() => props.row.avatar = null)"/>
  </span>
  <span v-else>
    <img alt="avatar" class="round-32" src="../../../assets/images/avatar-2.jpg"/>
  </span>
</span>

【讨论】：

【解决方案4】：

我尝试使用@error，但它不起作用，因为在我的情况下，找不到图像，所以我尝试了这个，它的工作。

<img :src="getImgUrl(filename)">

methods: {
    getImgUrl(filename){
      try{ 
        return require(`@/assets/${filename}`)
      }catch(_){
        return require(`@/assets/default.png`)
      }
    },
}

【讨论】：

【解决方案5】：

我最终得到了一个指令来设置后备图像并防止循环：

image-src-fallback.js

const setSrc = (evt) => {
  const el = evt.currentTarget;
  el.setAttribute("src", el.fallback);
  el.fallback = "";
  el.removeEventListener("error", _listener);
};

const _listener = (evt) => setSrc(evt);

export default {
  bind(el, binding) {
    el.fallback = binding.value;
    el.addEventListener("error", _listener);
  },

  unbind(el) {
    el.removeEventListener("error", _listener);
  },
};

全局导入

import imageSrcFallback from "./directives/image-src-fallback.js";
Vue.directive("src-fallback", imageSrcFallback);

使用

<img
  v-src-fallback="user.avatar_fallback_url"
  :src="user.avatar_url"
/>

【讨论】：

【解决方案6】：

有时您可以创建一个方法，例如在我的情况下，由于客户端没有上传图像而找不到一些图像，那么您可以为其创建一个方法：您可以将任何值作为图像返回，或者简单的 '' 用于任何图片。

<div class="flex-shrink-0">
            <img
              class="h-72 w-full object-cover"
              :src="showFirstImageGallery(p.project_images)"
            />
          </div>

methods: {
    showFirstImageGallery(v){
        if (v.length > 1) {
            return v[1].img_url
        } else {
            return ''
        }
    }
  },

【讨论】：