Estoy tratando de cargar imágenes dinámicamente en un componente secundario, pero la imagen no se carga.
Esto es lo que probé:
el básico: src = "imagePath" no se carga
require ya no está disponible por lo que no funciona
import( ../${imagePath} ) devuelve una Promesa indefinida
Aquí está mi código:
<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>Supongo que estás usando Vite:
Intente envolver la URL con una 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>Además, hay un problema abierto sobre los activos con URL dinámica si desea profundizar más.