Vue+Vite组件通过属性传图片URL无法加载的问题及解决

在Vue3（script setup）+Vite项目中，尝试通过父组件传递cover属性给子组件ProjectPreview以设置img标签的src，但无论是传递相对路径还是@别名路径，图片均无法加载，@别名完全未生效。

初始代码 #

父视图（Gallery View） #

<script setup>
import ProjectPreview from "../components/ProjectPreview.vue";
</script>

<template>
  <main>
    <ProjectPreview cover="../assets/img/projects/summary/cover.jpg" title="Summary (Illustration)"
      desc="Personal work" url="https://example.com" />
    <ProjectPreview cover="@/assets/img/projects/axes/cover.jpg" title="Axes (Concept Art)"
      desc="Prop design"
      url="https://example.com" />
    <ProjectPreview cover="@/assets/img/projects/summary/cover.jpg" title="Summary (Illustration)"
      desc="Personal work" url="https://example.com" />
    <ProjectPreview cover="@/assets/img/projects/summary/cover.jpg" title="Summary (Illustration)"
      desc="Personal work" url="https://example.com" />
  </main>
</template>

子组件（ProjectPreview） #

<script setup>
defineProps({
    cover: {
        type: String,
        required: true,
    },
    title: {
        type: String,
        required: true,
    },
    desc: {
        type: String,
        required: true,
    },
    url: {
        type: String,
        required: true,
    },
});
</script>

<template>
    <div class="card mx-1" style="width: 20rem;">
        <img :src="cover" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title text-primary">{{title}}</h5>
            <p class="card-text">{{desc}}</p>
            <a href="{{url}}" class="btn btn-danger">See full project</a>
        </div>
    </div>
</template>

Vite配置文件 #

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

const path = require("path");

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      "~bootstrap": path.resolve(__dirname, "node_modules/bootstrap"),
    },
  },
});

修改后的解决方案 #

修改后的父视图 #

<script setup>
import ProjectPreview from "../components/ProjectPreview.vue";
</script>

<template>
  <main>
    <ProjectPreview cover="projects/summary/cover.jpg" title="Summary (Illustration)"
      desc="Personal work" url="https://example.com" />
    <ProjectPreview cover="projects/axes/cover.jpg" title="Axes (Concept Art)"
      desc="Prop design"
      url="https://example.com" />
  </main>
</template>

修改后的子组件 #

<script setup>
defineProps({
    cover: {
        type: String,
        required: true,
    },
    title: {
        type: String,
        required: true,
    },
    desc: {
        type: String,
        required: true,
    },
    url: {
        type: String,
        required: true,
    },
});

function getUrl(file) {
    return new URL(`/src/assets/img/${file}`, import.meta.url).href;
}
</script>

<template>
    <div class="card mx-1" style="width: 20rem;">
        <img :src="getUrl(cover)" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title text-primary">{{title}}</h5>
            <p class="card-text">{{desc}}</p>
            <a href="{{url}}" class="btn btn-danger">See full project</a>
        </div>
    </div>
</template>

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