时间戳

首页 > 解决方案 > 如果在 Vue 3 中加载动态变化的图像，则更改 CSS

vue.js - 如果在 Vue 3 中加载动态变化的图像，则更改 CSS

问题描述

我正在尝试根据是否加载图像来更改 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>

链接到 CodePen

标签： vue.jsvuejs3

解决方案

添加到您的输入：

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

并在方法部分创建函数：

updateURL() {
    this.imgLoaded = false
}

推荐阅读