Vue-3 + Typescript 类型 '{ backgroundImage: string; }' 不可分配给类型 'string'

Question

我想构建和部署 Vue3 + Typescript 应用程序。我正在使用 Vite，当我尝试构建应用程序时出现错误。

vue-tsc --noEmit && vite build
error TS2322: Type '{ backgroundImage: string; }' is not assignable to type 'string'.46       :src="image"

我的 vue3 应用程序文件夹如下：

./spine-frontend
..../src
--------/assets
----------/img
--------/views
----/public

我正在尝试将我的图像用作数据：

<template>
  <div class="absolute top-0 right-0 block w-9/12 h-full">
    <img
      alt="Snowy mountain lake"
      class="object-cover min-w-full h-full"
        <div class="absolute top-0 right-0 block w-9/12 h-full">
          <img
            alt="Snowy mountain lake"
            class="object-cover min-w-full h-full"
            :src="image"
          />
        </div>
      />
  </div>
</template>
<script lang="ts">
export default {
    name: 'Home',
    data() {
        return {
            image: { backgroundImage: "url(static/img/hero-image.jpg)" }
        }
    }
}
</script>

你能帮我在构建时使用 vue3/vite 方式渲染图像吗？

谢谢

Answer 1

您应该在使用 TS 时使用 defineComponent，以便可以正确推断类型

https://vuejs.org/guide/typescript/overview.html#definecomponent

此外，我看到您有一个名为 Home 的组件，组件名称应始终为 multi-word:

https://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names

Vue-3 + Typescript 类型 '{ backgroundImage: string; }' 不可分配给类型 'string'

Vue-3 + Typescript Type '{ backgroundImage: string; }' is not assignable to type 'string'

typescript

vue.js

vuejs3

vite