Vue 2.6.14中TypeScript Ref绑定img src属性报错原因咨询

核心原因拆解 #

1. 为什么 :src="specificImg.value" 图片无法加载？ #

• useQuery 返回的 data 是异步响应式 Ref 对象，初始状态下 specificImg.value 为 undefined，此时图片 src 被设为无效值，触发浏览器加载错误。
• 即便后续请求完成、specificImg.value 更新为有效 URL，部分浏览器不会自动重试加载已标记失败的图片，导致图片始终无法显示。
• 另外，Vue 2 的 Composition API 插件（@vue/composition-api）在模板中会自动为 Ref 对象解包，直接写 .value 属于冗余操作，还可能破坏响应式更新的追踪逻辑。

2. 为什么 :src="specificImg" 图片加载正常但 TypeScript 报错？ #

• 运行时层面：Vue 2 的 Composition API 插件会自动将模板中的 Ref 对象解包为内部原始值（图片 URL 或 undefined），因此图片能正常加载。
• TypeScript 层面：TypeScript 无法识别 Vue 模板的自动解包逻辑，它会严格校验类型——specificImg 的类型是 Ref<string | undefined>，而 img 标签的 src 属性期望 string | undefined 类型，Ref 对象本身无法直接赋值给字符串类型，因此抛出类型不匹配错误。

3. 为什么 .toString() 能临时解决问题？ #

• 运行时：Vue 自动解包 specificImg 为内部字符串值，调用 .toString() 只是对该字符串执行无意义的类型转换，实际效果和直接用 specificImg 一致。
• TypeScript 层面：Ref<string | undefined> 对象调用 .toString() 后返回值类型为 string，符合 src 属性的类型要求，因此 TypeScript 不再报错。但这属于投机取巧的写法，并非正规解决方案。

正规解决方案 #

使用 unref 工具函数显式解包 Ref 对象，兼顾类型安全和运行时逻辑：

<template>
  <img :src="unref(specificImg)" />
</template>

<script lang="ts">
import Vue from 'vue'
import { useQuery } from 'vue-query'
import { unref } from '@vue/composition-api'

export default Vue.extend({
  setup() {
    const { data: specificImg } = useQuery(["specificImg", id], () =>
      apiService.fetchSpecificImg(id),
      { refetchOnWindowFocus: false }
    );
    return { specificImg, unref }
  }
})
</script>

unref 是 Vue Composition API 提供的工具函数：若传入 Ref 对象则返回其 .value，若为原始值则直接返回。TypeScript 能识别其类型转换逻辑，不会报错，同时运行时可正确获取图片 URL。

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