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

Question

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

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

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

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

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

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

原文由 Vishwas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 ceejayoz 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

因为在纯 js 中像这样内联错误

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

原文由 Mohsen 发布，翻译遵循 CC BY-SA 4.0 许可协议