<img :src=“draRow.url2” 如何在图片加载后执行window.URL.revokeObjectURL

在Vue.js中，`<img>` 标签通常用于显示图像，并通过 `src` 属性引用图片源。当图片加载完成后，有时你需要释放由 `new Image()` 或 `new URL.createObjectURL(image)` 创建的对象URL，以便回收内存资源。为了在图片加载成功后执行`window.URL.revokeObjectURL(url)`，你可以这样做：

1. 使用`v-if`或`v-show`指令确保图片在加载完成后再插入到DOM中：

<img :src="draRow.url2" v-if="!imageLoaded" @load="handleImageLoad">

2. 定义`handleImageLoad`方法处理图片加载事件：

data() {
  return {
    imageLoaded: false,
    imageUrl: null,
  };
},
methods: {
  handleImageLoad(e) {
    this.imageLoaded = true;
    const url = e.target.src; // 获取当前图片的URL
    if (this.imageUrl !== url) { // 防止多次触发，只对新加载的图片操作
      this.imageUrl = url;
      window.URL.revokeObjectURL(this.imageUrl); // 释放对象URL
    }
  },
}

在这个例子中，当图片加载完毕，`handleImageLoad`会被调用，它会更新`imageLoaded`状态并撤销对应的URL。