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>

Roland · Accepted Answer · 2022-03-17 15:18:15Z

5

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.

edited Mar 17, 2022 at 15:18

answered Mar 17, 2022 at 15:13

Roland

28.1k9 gold badges108 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

image doesn't load vuejs script setup

Parent compoenent

Child component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Parent compoenent

Child component

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related