Vue-3 +打字稿类型 '{ backgroundImage: string; }'不可分配给类型“string”；

发布于 2025-01-10 22:29:30 字数 1125 浏览 0 评论 0原文

我想构建和部署 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 方式渲染我的图像吗？

谢谢

原文

I want to build and deploy Vue3 + Typescript application. I am using Vite and when I try to build the application I am getting an error.

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

my folders for my vue3 application is as below:

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

and I am trying to use it my image as data:

<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>

Can you help me to use vue3/vite way to render my images while build?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

高冷爸爸 2025-01-17 22:29:30

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

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

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

<一个href="https://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names" rel="nofollow noreferrer">https://vuejs.org/style-guide/ Rules-essential.html#use-multi-word-component-names

回复收藏 0 原文

~没有更多了~