404 not found svg in nuxt-CodePudding

I want to show some country flags with this plugin (https://www.growthbunker.dev/vueflags/)

The folder with flags is in:

.app/
  ../assets/flags <- HERE
  ../components
  ../layouts
  .. etc

Plugin settings

// 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',
  });

finally i call the component (french's flag should be rendered)

<gb-flag code="fr" size="small" />

But i get this error

GET http://localhost:3000/assets/flags/fr.svg 404 (Not Found)

I tried with iconPath: '~/assets/flags', same error:

GET http://localhost:3000/~/assets/flags/fr.svg 404 (Not Found)

in nuxt.config.js:

buildModules: [
    [
      "@nuxtjs/vuetify",
      {
        /* module options */
      },
    ],
    ["@nuxtjs/svg"],
  ],

CodePudding user response：

I created this repo if you want to see an implementation: https://github.com/r9mp/stackoverflow-vueflags

To do this in a short version : put your flags/*.svg in the static directory.

I tried to make it work with the assets/ directory, but it seems a bit tricky for (I think) this reasons: files smaller than 1kb are converted in base64 and so your flags are not copied to /_nuxt/flags/*.svg. From the documentation: "Which means that every file below 1 kB will be inlined as base64 data URL. Otherwise, the image/font will be copied in its corresponding folder (inside the .nuxt directory) with a name containing a version hash for better caching." (https://nuxtjs.org/docs/directory-structure/assets#webpack-assets)

Or maybe wepback just does not understand the vueflags config and so does not import files in build... I'll try to investigate further!