Import image into Component template, from an URL that is being passed as a property of the Componen-CodePudding

I have an image in a Component's template, of which I want to set its 'src' from a property. I tried doing it like this at first:

Gallery View, from where the Component is called multiple times

<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>

Component (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  style="width: 20rem;">
        <img :src="cover"  alt="...">
        <div >
            <h5 >{{title}}</h5>
            <p >{{desc}}</p>
            <a href="{{url}}" >See full project</a>
        </div>
    </div>
</template>

Vite config

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"),
    },
  },
});

But it does not work, and it seems like the URL is not being well resolved (the '@' symbol is not being resolved at all).

I tried looking at the docs and searching for similar errors but do not understand where the problem could be. I also could not find examples where the image was being loaded from a property of the Component.

Final code after @Yitz 's answer.

View

<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>

Component

<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  style="width: 20rem;">
        <img :src="getUrl(cover)"  alt="...">
        <div >
            <h5 >{{title}}</h5>
            <p >{{desc}}</p>
            <a href="{{url}}" >See full project</a>
        </div>
    </div>
</template>

CodePudding user response：

Use

cover="projects/summary/cover.jpg"

Then have a function

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

in your script.

Then use it like

 <img :src="getUrl(cover)" .../>

You don't need the @, Vite should take care of the proper location for you.