Vue2+TypeScript中img赋值HTMLImageElement类型报错求助

在Vue 2 + TypeScript项目中，我在types.ts里声明了如下类型：

export type SetupSliderType = {
  name: SetupSliderEnum;
  image: HTMLImageElement;
  title: keyof I18nMessages;
  component: Function;
}

接着在RegisterSetup.tsx中声明该类型的数组时：

private slides: Array<SetupSliderType> = [
    {
      name: SetupSliderEnum.solutions,
      image: <img src={solutions_logo}/>,
      title: I18nMessages['account.register.side.subheading'],
      component: this.renderSlideSolutions
    },
]

触发了类型错误：

Type 'VNode' is missing the following properties from type 'HTMLImageElement': align, alt, border, complete, and 309 more.ts(2740)
types.ts(13, 3): The expected type comes from property 'image' which is declared here on type 'SetupSliderType'

想知道哪里操作有误，以及正确的用法是什么。

错误根因 #

你混淆了Vue的虚拟DOM节点（VNode）和浏览器的真实DOM元素（HTMLImageElement）：

• 在Vue JSX中，<img src={solutions_logo}/>返回的是VNode（Vue用来描述DOM的虚拟节点），不是浏览器里真实的<img>DOM对象。
• 但你在SetupSliderType里把image的类型定义成了HTMLImageElement，类型不匹配导致报错。

两种修正方案 #

方案1：修改类型定义（推荐，符合Vue开发逻辑）

既然你用的是Vue的JSX虚拟节点，直接把image的类型改成Vue的VNode即可：

// types.ts
import { VNode } from 'vue'; // 记得导入VNode类型

export type SetupSliderType = {
  name: SetupSliderEnum;
  image: VNode; // 替换HTMLImageElement为VNode
  title: keyof I18nMessages;
  component: Function;
}

修改后数组里的<img>节点就能正常匹配类型了，这也是Vue项目中处理虚拟节点的常规方式。

方案2：若必须使用真实DOM元素（仅特殊场景）

如果业务逻辑确实需要操作真实DOM，可以通过Vue的ref来获取，但这种方式不适合在数组初始化阶段直接赋值，因为此时DOM还未渲染：

// 组件内定义ref
private imageRef = ref<HTMLImageElement | null>(null);

// 组件挂载后获取真实DOM并赋值
mounted() {
  if (this.imageRef.value) {
    this.slides[0].image = this.imageRef.value;
  }
}

// 模板中绑定ref（若用模板而非JSX）
<template>
  <img ref="imageRef" :src="solutions_logo" />
</template>

这种方式需要处理DOM渲染时机，比方案1繁琐，仅在你必须操作真实DOM（比如获取图片宽高、操作Canvas等）的场景下使用。

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