Vue3中图片URL损坏时如何替换<img>src？

Question

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

使用 jQuery 我可以执行以下操作：

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

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

非常感谢您的帮助！

Answer 1

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

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

Answer 2

您可以使用@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>

Vue3中图片URL损坏时如何替换<img>src？

How to replace <img> src when the image URL is broken in Vue3?

javascript

image

src

vue.js

vuejs3