如果在 Vue 3 中加载动态变化的图像，则更改 CSS答案

【问题标题】：Change the CSS if dynamically changing image is loaded in Vue 3如果在 Vue 3 中加载动态变化的图像，则更改 CSS
【发布时间】：2021-12-21 14:54:00
【问题描述】：

我正在尝试根据是否加载图像来更改 div 的 CSS 类。图片 URL 取自 <input> 字段，因此 <img src> 可以更改。我已经设法使用@load 事件在第一个页面加载时设置 CSS 类。但是，如果我将输入字段中的图像 URL 更改为不存在的图像，则 CSS 不会更改。如何跟踪输入的值是否已更改并“重新检查”图像是否已加载？

在下面的示例中，如果图像存在，我想要green-bg，如果图像不存在，我想要red-bg。

 <div id="app">

    <div :class="imgLoaded ? 'green-bg' : 'red-bg'">
      <img :src=imgURL @load="imgLoaded = true" />
      <br/>
      <input v-model="imgURL" />
    </div>
    
  </div>

<script>
export default {
  data() {
    return {
      imgURL: 'https://picsum.photos/200/300',
      imgLoaded: false,
    };
  }
};
</script>

Link to CodePen

【问题讨论】：

我想你在找watch

标签： vue.js vuejs3

【解决方案1】：

这是一个使用观察者的好地方。

watch: {
    imgURL(newVal, oldVal) {
      if (newVal !== oldVal) this.imgLoaded = false
    }
  }

挂钩输入事件也可以，但存在新值与旧值相似的极端情况。如果您随后将 imgLoaded 设置为 false，CSS 类将不会更改为 green-bg，因为加载事件不会触发（因为 url 没有更改）。

使用观察者时，您可以将旧值与新值进行比较，如果值不同，则仅将 imgLoaded 设置为 false。

这里是pen。

【讨论】：

谢谢。这可行，但是如果imgLoaded 在数组中，我如何更改它的值。我知道watching values in arrays，但不知道如何更新值。我有这个问题updated your pen。
借助阵列，您可以为一个充满伤害的世界敞开心扉。我已经修复了您的代码中的一些问题，以便它确实在更改的 url 上触发，但是深度观察数组的问题是您无法获取数组的旧值，所以什么都没有比较它。 codepen.io/gijswijs/pen/abyepea 请参阅此答案以获取可能的解决方案（通过将数组克隆为字符串并观察该字符串）stackoverflow.com/a/50696834/119129 同时，您能否接受此答案为正确答案，因为它确实回答了最初的问题。
感谢您提供更多信息！我接受了您的回答，因为它确实回答了原始问题：“我如何跟踪输入的值是否已更改并“重新检查”图像是否已加载？”。我还链接到this answer，它检查图像是否存在并以不同的方式解决相同的问题。这两种方法的性能有区别吗？

【解决方案2】：

添加到您的输入：

<input type="text" v-model="imgURL" @input="updateURL">

并在方法部分创建函数：

updateURL() {
    this.imgLoaded = false
}

【讨论】：

我不能完全让它工作。 imgLoaded 更改为 false 但 CSS 类没有更改。此外，imgLoaded 不会在输入更改为 true 时再次更改为 @load 再次为 true。

【解决方案3】：

我设法通过使用@error 方法解决了我的问题。 imgLoaded 将在出错时设置为 false，在加载时设置为 true。

<div id="app">

    <div :class="imgLoaded ? 'green-bg' : 'red-bg'">
      <img :src=imgURL @load="imgLoaded = true" @error="imgLoaded = false" />
      <br/>
      <input v-model="imgURL" />
    </div>
    
  </div>

这适用于根据图像是否存在更改 CSS 类的情况。

【讨论】：