Question

我正在开发一个包含产品列表的网站。每个产品都有相应的图像。我将图片网址绑定到源属性，如下所示。

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

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

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

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

如何在Vue中实现相同目标？

Answer 1

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

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

Answer 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'"/>

Answer 3

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

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

Answer 4

我发现在@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>

Answer 5

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

<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 ''
        }
    }
  },

Answer 6

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

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

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

Answer 7

您可以使用v-if和v-else。像

<div v-if="product.ImageUrl !== undefined">
   <img :src="product.ImageUrl"/>
</div>
<div v-else>
  <img :src="YOUR DEFAULT IMAGE PATH"/>
</div>

Vue js - 未找到图像源时设置alt图像

7 个答案: