Vue3中图像URL损坏时如何替换<img> src？ [复制]答案

【问题标题】：How to replace <img> src when the image URL is broken in Vue3? [duplicate]Vue3中图像URL损坏时如何替换<img> src？ [复制]
【发布时间】：2021-12-18 11:44:15
【问题描述】：

我有一个在 Vue3 中使用 v-for 指令呈现的数据表行列表。在每一行中都有一个标签，其中包含在线图像的 src URL。每当图像 URL 损坏（图像不再存在）时，我希望 src URL 更改为默认值。

使用 jQuery，我可以做到以下几点：

        $('img').on("error", function() {
            $(this).attr('src', 'fallbackURL');
          });

如何在 Vue3 中做类似的事情？我正在寻找最简单的解决方案，因为可能有很多行和许多损坏的图像 URL。我不介意保留这个 jQuery 解决方案，但我不知道如何在 Vue 中实现它。

非常感谢您的帮助！

【问题讨论】：

查看stackoverflow.com/a/53215340/8172857
这是同样的问题，但我不使用 Vuetify（v-img 不是本机 Vue 指令）+ 解决方案涉及我想避免的计算属性，我正在寻找最轻的可能解决方案。谢谢！
v-img 继承了img 属性，为什么要避免计算属性？

标签： javascript image vue.js vuejs3 src

【解决方案1】：

您可以使用@error 来执行此操作，如果图像未找到或损坏，则输入您想要的功能，然后将 src 更改为默认图像。

试试这个方法。

我用这个作为默认图片 -> https://i.ibb.co/5908vXL/Screenshot-from-2021-06-15-11-13-44.png

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <img src="test.png" @error="imageLoadOnError"/>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
   imageLoadOnError(e) {
          e.target.src = "https://i.ibb.co/5908vXL/Screenshot-from-2021-06-15-11-13-44.png"
      }
  }
})
</script>

【讨论】：

谢谢，这是一个优雅的 Vue 解决方案，虽然我更喜欢原生解决方案，因为它不涉及创建额外的函数和数据属性
如何在 Vue3 中做类似的事情？您要求在 vue3 中执行此操作，因此您也可以使用骨架图像，例如在加载图像时会更专业。我只是回答了你真正想要的。所以检查一下 Vue 中的骨架图像，祝你好运
你说得对，它以我提出的方式回答了问题。我的意思是“在 Vue3 环境中”，但我认为这在许多情况下可能是最相关的解决方案。我也没有看到骨架方面，这在未来可能会很有趣。谢谢！
欢迎您......

【解决方案2】：

这种情况不需要使用Vue，有原生解决方案：

<img src="..." onerror="this.onerror=null; this.src='Default.jpg'" />

【讨论】：