Estoy usando Vue js 3 para crear una página web.

Mi componente (SingleFile):

 <template> <img alt="Vue logo" src="{{ img_url }}" class="-mr-16 object-cover image-focus" /> </template> <script lang="ts"> import { Options, Vue } from "vue-class-component"; @Options({ props: { img_url: String }, }) export default class HelloWorld extends Vue { msg!: string; } </script>

La forma en que lo llamo:

 <CatchImage img_url="@/assets/images/Image.jpg" /> <script lang="ts"> import { Options, Vue } from "vue-class-component"; import Image from "@/components/Image.vue"; @Options({ components: { Image, }, }) </script>

Esto no carga la imagen. En su lugar me sale un error. Si reemplazo la variable con la ruta real, funciona bien.