如果在 Vue 3 中加载了动态变化的图像，请更改 CSS

Question

我正在尝试根据是否加载图像来更改 div 的 CSS class。图片 URL 取自 <input> 字段，因此 <img src> 可以更改。我已经设法使用 @load 事件在第一个页面加载时设置了 CSS class。但是，如果我将输入字段中图像的 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

Answer 1

给你添加输入：

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

并在方法部分创建函数：

updateURL() {
    this.imgLoaded = false
}

Answer 2

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

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

挂钩到输入事件也可以，但有一种边缘情况，即新值与旧值相似。如果您随后将 imgLoaded 设置为 false，则 CSS class 不会更改为 green-bg 因为加载事件不会触发（因为 url不变）。

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

这里是 pen.

Answer 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 class 根据图像是否存在而改变的情况。

如果在 Vue 3 中加载了动态变化的图像，请更改 CSS

Change the CSS if dynamically changing image is loaded in Vue 3

vue.js

vuejs3