Nuxt3为何无法解析作为Props传入Vue组件的URL？

问题原因 #

当你在模板的img标签直接写src="~/assets/image.png"时，Vite/Webpack等构建工具会在编译阶段自动解析~//@为项目根目录，同时处理图片资源（复制到输出目录、生成哈希文件名）。但通过Prop传入的是字符串形式的路径，构建工具不会对这个字符串做解析，浏览器会直接把它当作相对路径请求，导致出现404错误。

简洁解决方案 #

方案1：父组件传入已解析的资源路径（推荐） #

在父组件中提前解析图片路径，再传给子组件，避免子组件额外处理：

<template>
  <ProductPanel :logoUrl="logoUrl">
    <template #product-name>Flux capacitor</template>
  </ProductPanel>
</template>

<script setup lang="ts">
import ProductPanel from './ProductPanel.vue';

// Vite环境下使用new URL解析
const logoUrl = new URL('~/assets/image.png', import.meta.url).href;

// Webpack环境下使用require
// const logoUrl = require('~/assets/image.png').default;
</script>

方案2：子组件内部自动解析路径 #

如果希望父组件保持传入~/开头的字符串，可在子组件中通过计算属性手动解析：

<template>
  <div class="product-panel">
    <h2 class="text-center text-primary">
      <slot name="product-name"></slot>
    </h2>
    <img src="~/assets/image.png" alt="test (works)" style="border: thin solid red;"/>
    <img :src="resolvedLogoUrl" alt="product logo (works now)" />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue';

const props = defineProps({
    logoUrl: String
});

const resolvedLogoUrl = computed(() => {
  if (!props.logoUrl) return '';
  // 替换~/为@，适配Vite/Webpack的路径别名
  const resolvedPath = props.logoUrl.replace('~/', '@/');
  // Vite环境下解析路径
  return new URL(resolvedPath, import.meta.url).href;
  // Webpack环境下用require
  // return require(resolvedPath).default;
});

onMounted(() => {
    console.log('Resolved Logo URL:', resolvedLogoUrl.value);
});
</script>

方案3：全局注册路径解析方法（多组件复用场景） #

如果多个组件都需要处理这类路径，可以在全局注册一个解析方法：

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 全局路径解析方法
app.config.globalProperties.$resolveAsset = (path: string) => {
  const resolvedPath = path.replace('~/', '@/');
  return new URL(resolvedPath, import.meta.url).href;
};

app.mount('#app');

子组件中直接调用全局方法：

<template>
  <img :src="$resolveAsset(logoUrl)" alt="product logo" />
</template>

内容的提问来源于stack exchange，提问作者Reece