在 Vue.js + TypeScript 中更改图像源属性

Question

所以我有一个简单的 img 标签：

<img @error="replaceByDefaultImage" :src="urls.photos_base_url_small.jpg'"/>

replaceByDefaultImage 函数如下所示：

replaceByDefaultImage(e: HTMLImageElement) {
  e.src = '/img/default.png';
}

现在，如果 photos_base_url_small 丢失，replaceByDefaultImage 会触发，但不会更改图像源。或者至少它不会改变 HTML 本身。虽然如果我使用像e.target.src = '/img/default.png'; 这样的目标，它可以工作，但如果我想使用目标，我必须将任何类型设置为事件变量e，我不想使用这种类型。有什么想法吗？

Answer 1

replaceByDefaultImage(e: Event) {
  (e.target as HTMLImageElement).src = '/img/default.png';
}

找到了这个解决方案。我猜看起来不错。变量e 是一种事件，所以我们不能像图像本身一样使用它。我们必须先获取目标元素。