Javascript Vue js-在找不到图像源时设置alt image

我在一个有产品清单的网站上工作。每个产品都有相应的图像。我正在将图像url绑定到源属性，如下所示

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

---

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

您可以在Vue中使用

@error

设置

onerror

处理程序函数：

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

---

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

props.row.avatar=null）“/>

因为在纯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'"/> 

---

有时您可以创建一个方法，例如，在我的例子中，由于客户端没有上载图像，所以找不到一些图像，然后您可以为其创建一个方法：您可以将任何值作为图像返回，也可以为任何图像返回简单的“”

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

方法：{
showFirstImageGallery（五）{
如果（v.长度>1）{
返回v[1]。img\u url
}否则{
返回“”
}
}
},

我尝试使用@error，但它不起作用，因为在我的例子中，找不到图像，所以我尝试了这一个，它的工作

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

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

方法：{
getImgUrl（文件名）{
试试{
返回require（`@/assets/${filename}`）
}接住{
返回要求（`@/assets/default.png`）
}
},
}

我最后得到了一个指令，用于设置回退映像并防止循环：

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);

使用

甚至。这很有效。谢谢！酷，我已经回答了。

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