Vue3中监听动态图片加载状态并切换对应CSS类的实现方法

你需要补充两个逻辑即可实现需求：

• 给img标签添加@error事件，处理图片加载失败的场景
• 监听imgURL的变化，每次修改URL时先重置加载状态，避免历史结果干扰

修改后完整代码 #

模板部分 #

<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>

脚本部分 #

export default {
  data() {
    return {
      imgURL: 'https://picsum.photos/200/300',
      imgLoaded: false,
    };
  },
  watch: {
    // 监听图片URL变更
    imgURL() {
      // 重置加载状态，等待新URL加载结果
      this.imgLoaded = false;
    }
  }
};

运行逻辑说明 #

1. 输入框修改URL后，监听器触发将imgLoaded重置为false，div先切换为red-bg
2. 新URL开始加载，加载成功触发@load事件将imgLoaded设为true，div切换为green-bg；加载失败触发@error事件保持imgLoaded为false，div保持red-bg

内容的提问来源于stack exchange，提问作者veesar