Vue-3 +类型类型“{ backgroundImage: string；}”不能指定键入“string”

Question

我想构建和部署Vue3 +类型记录应用程序。我正在使用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 3/vite方式在构建过程中呈现我的图像吗？

谢谢

Answer 1

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

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

另外，我看到您有一个名为Home的组件，组件名称应该始终是多个单词：

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