Vue3单文件组件通过props传@路径绑定img src不生效问题求助

• 语法使用错误：Vue中动态绑定HTML属性不能使用Mustache（{{ }}）插值语法，必须使用v-bind:（简写为:）指令，直接写src="{{img_url}}"属于非法写法，Vue无法正确解析这个属性值。
• 组件名不匹配：父组件注册的组件名为Image，但调用时使用的是<CatchImage />标签，名称不匹配会导致组件无法正常渲染，甚至抛出组件未注册的报错。
• 别名路径无法被打包工具解析：@/是Vite/Webpack等打包工具预设的路径别名，只有直接写在模板的src、href或者CSS的url()中时，才会在编译阶段被自动转换为实际的资源路径；如果作为普通字符串通过Props传递，打包工具不会对其做处理，浏览器运行时无法识别@/开头的路径，导致资源加载失败。

1. 修复属性绑定语法
   将子组件img标签的src="{{img_url}}"修改为:src="img_url"，使用v-bind绑定动态属性。
2. 修复组件名不匹配问题
   保持组件注册名和调用名一致，要么修改注册逻辑为：

@Options({
  components: {
    CatchImage: Image,
  },
})

要么调用时使用<Image :img_url="xxx" />标签。
3. 解决别名路径解析问题，二选一即可：

• 方案一：父组件提前引入图片资源再传递
  父组件先import引入图片，打包工具会自动处理返回正确的资源访问路径，再将该路径传给子组件Props：

<template>
  <Image :img_url="imgUrl" />
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import Image from "@/components/Image.vue";
// 提前引入图片资源
import imgUrl from "@/assets/images/Image.jpg";

@Options({
  components: {
    Image,
  },
  data() {
    return {
      imgUrl
    }
  }
})
export default class Parent extends Vue {}
</script>

• 方案二：子组件内动态解析路径（适用于Vite环境）
  在子组件内通过new URL()结合import.meta.url动态处理传入的路径，自动完成别名解析：

<template>
  <img
    alt="Vue logo"
    :src="resolvedImgUrl"
    class="-mr-16 object-cover image-focus"
  />
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  props: {
    img_url: String
  },
  computed: {
    resolvedImgUrl() {
      return new URL(this.img_url, import.meta.url).href
    }
  }
})
export default class Image extends Vue {}
</script>

内容的提问来源于stack exchange，提问作者Marvin S.