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

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 >
    <img
      alt="Snowy mountain lake"
      
        <div >
          <img
            alt="Snowy mountain lake"
            
            :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

CodePudding user response：

You should use defineComponent when working with TS so types can be properly inferred

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

Also, I see you have a component named Home, component names should always be multi-word:

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