One of the challenges I faced was setting the 'src' attribute of an image in a Component's template from a property value. Initially, I attempted to do this as follows:
Gallery View, 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 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 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"),
},
},
});
I encountered issues with the above approach, specifically related to resolving the URL correctly (the '@' symbol wasn't resolved). Despite searching for solutions and error references in the documentation, the problem persisted. Additionally, examples illustrating loading images from a Component property were scarce.
Final code following @Yitz 's solution.
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 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>