Estoy tratando de crear una galería de imágenes usando Vue.js y las imágenes locales no se cargan. Tengo los atributos src establecidos en el atributo de datos y parece que solo puedo cargar imágenes de fuentes externas. Ejemplo:
data() { return { images: [ "../assets/images/photos/bathroom/bathroom-1.png", "https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg", ], }; },Con el resto de mi código para desplazarme por la galería, la primera imagen no se carga, aunque sí la segunda imagen. Me imagino que es algo relacionado con la forma en que Vue compila todo, ya que puedo mostrar la imagen estáticamente con una etiqueta normal y configurar el src manualmente.
Envuelva cualquier ruta relativa en require() .
En tu caso:
export default { data: () => ({ images: [ require("../assets/images/photos/bathroom/bathroom-1.png"), "https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg" ] }) }Documentación: Vue Loader .