I am trying to dynamically load images in a child component but the image doesn't laod.
Here's what i tried :
the basic :src="imagePath" doesn't load
require is no longer available so doesn't work
import(../${imagePath}) return an undefined Promise
Here's my code :
<script setup lang="ts">
import TheProject from './utils/TheProject.vue';
const projects = [
{
idProject: 1,
title: "title",
desc: "desc",
imagePath: "../path/..",
cardColor: "C4F6DE"
},
]
</script>
<template>
<div v-for="project in projects">
<TheProject :idProject="project.idProject" :title="project.title"
:desc="project.desc" :imagePath="project.imagePath" :cardColor="project.cardColor" />
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
const props = defineProps({
idProject: Number,
title: String,
desc: String,
imagePath: String,
cardColor: String
})
</script>
<template>
<img :src="props.imagePath" />
</template>
I am guessing you are using Vite:
Try to wrap the URL with new URL('path_here', import.meta.url).href
<script setup>
const imagePath = new URL('./logo.png', import.meta.url).href
</script>
<template>
<img :src="imagePath" />
</template>
Also, there is an open issue about assets with dynamic URL if you want to dive deeper.