Quiero mostrar algunas banderas de países con este complemento ( https://www.growthbunker.dev/vueflags/ )
La carpeta con las banderas está en:
.app/ ../assets/flags <- HERE ../components ../layouts .. etcConfiguración del complemento
// plugins/vueflags.js import Vue from "vue"; import VueFlags from "@growthbunker/vueflags"; Vue.use(VueFlags, { // Specify the path of the folder where the flags are stored. iconPath: 'assets/flags', });finalmente llamo al componente (se debe representar la bandera francesa)
<gb-flag code="fr" size="small" />pero me sale este error
GET http://localhost:3000/assets/flags/fr.svg 404 (Not Found) Probé con iconPath: '~/assets/flags' , mismo error:
GET http://localhost:3000/~/assets/flags/fr.svg 404 (Not Found)en nuxt.config.js:
buildModules: [ [ "@nuxtjs/vuetify", { /* module options */ }, ], ["@nuxtjs/svg"], ],Creé este repositorio si desea ver una implementación: https://github.com/r9mp/stackoverflow-vueflags
Para hacer esto en una versión corta: coloque sus flags/*.svg en el directorio estático.
Traté de hacer que funcionara con el directorio assets/, pero parece un poco complicado (creo) por estas razones: los archivos de menos de 1kb se convierten en base64 y, por lo tanto, sus banderas no se copian en /_nuxt/flags/*.svg . De la documentación: "Lo que significa que cada archivo por debajo de 1 kB se insertará como URL de datos base64. De lo contrario, la imagen/fuente se copiará en su carpeta correspondiente (dentro del directorio .nuxt) con un nombre que contiene un hash de versión para una mejor almacenamiento en caché". ( https://nuxtjs.org/docs/directory-structure/assets#webpack-assets )
O tal vez wepback simplemente no entiende la configuración de vueflags y, por lo tanto, no importa archivos en la compilación... ¡Intentaré investigar más a fondo!