2

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.

2
  • y cuando agrega la ruta directamente como una cadena. cual es la ruta que aparece en el DOM? creo que cambiar "@" por un "." podria ser la solución. Commented el 21 abr. 2022 a las 0:16
  • Cuando agrego la ruta mediante una cadena, finalmente en la web se ve asi: <img alt="Pala Excavadora" src="/img/grua.f55468d4.jpg"> No entiendo por que le asigna esa ruta a la imágen
    – Romera02
    Commented el 21 abr. 2022 a las 10:57

2 respuestas 2

2

Estuve investigando y esto ocurre porque cuando llama a un recurso dentro de javascript tiene que usar una ruta relativa ya que la carpeta assets no existe despues de que vue se compila asi como tambien cambian los nombres de los recursos.

para usar una ruta relativa solo debe hacer uso de require(rutaImg)

la llamada a su componente quedaria de esta forma:

<Header :imagenProps="{alt: 'Grua', src: require('@/modules/home/assets/grua.jpg') }" />

en este articulo en ingles se habla un poco al respecto. https://stackoverflow.com/questions/47313165/how-to-reference-static-assets-within-vue-javascript

1

Dentro del código html lo mejor es usar la notación de directorios para posicionarte y buscar lo que necesitas.

Intenta cambiar el @ por un esquema de directorios

Ejemplo:

./ -> Para posicionarte el directorio actual
../ -> Para subir un directorio
../../ -> Para subir dos directorios.

Así la ruta de la imagen seria por ejemplo

<img :alt="imagenProps.alt" src="../modules/home/assets/grua.jpg">

Suponiendo que la carpeta modules se encuentre dentro de src y que tu componente se encuentre en una ruta como esta

src/carpeta_componente/mi_componente.vue

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.