image doesn't load vuejs script setup

Question

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 :

Parent compoenent

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

Child component

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

Answer 1

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>

Vite docs: new URL

Also, there is an open issue about assets with dynamic URL if you want to dive deeper.