Estoy haciendo un proyecto en Vue y para encontrar mis assets uso el @ para hacer referencia a la carpeta src, por ejemplo para hacer uso de mis fuentes en css:
@font-face {
font-family: "Default-Regular";
src: url("@/assets/fonts/Roboto-Regular.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
Esto funciona correctamente, pero luego tengo el siguiente componente al que le paso por props una ruta para encontrar la imágen:
<template>
<Header :imagenProps="{alt: 'Grua', src: '@/modules/home/assets/grua.jpg'}" />
<h1></h1>
</template>
Luego obtengo la propiedad y le establezco la ruta a la imagen:
<img :alt="imagenProps.alt" :src="imagenProps.src">
En la web finalmente se ve así:
<img alt="Grua" src="@/modules/home/assets/grua.jpg" data-v-61dd7a3d="">
El problema es que no encuentra la ruta de la imagen si le paso la ruta mediante props, en cambio si le pongo directamente la ruta sin usar el "v-bind" o los ":" el el atributo src si encuentra la ruta, es decir si directamente pongo esto:
<img :alt="imagenProps.alt" src="@/modules/home/assets/grua.jpg">
Entonces si funciona pero necesito usar las props para reutilizar el componente, creo que el problema es por usar webpack pero no estoy seguro.
<img alt="Pala Excavadora" src="/img/grua.f55468d4.jpg">
No entiendo por que le asigna esa ruta a la imágen