Giters

ubaldop / vue-country-flag

Vue component for country flags

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vue-country-flag/dist/flags.png 404 not found

existe-deja opened this issue · comments

commented

Stack

  • nuxt v2.15.6
  • vue-country-flag v2.1.1

reproduction link
Just a simple yarn create nuxt-app with vue-country-flag dependency.

Problem
When I use the country-flag component I get a 404 for http://localhost:3000/vue-country-flag/dist/flags.png on initial render (SSR).
Is it possible to get vue-country-flag working in SSR mode?

Workaround
Wrap it around special component who disable SSR.

commented

Thanks for reporting this.
At the moment, to make the .ssr.js file of vue-country-flag working for client side rendering as well, it needs to reference a relative path for the flags image sprite. Alas, this won't work out of the box with the SSR.
I will investigate further if it is possible to have it working properly in the future.

Here I list other two possible workarounds:

Workaround 1

copy the flags.png file in the following path of your application:

static\vue-country-flag\dist\

This will make your flags.png asset available even through the SSR rendering. As described here:

All included files will be automatically served by Nuxt and are accessible through your project root URL.

because of this Nuxt feature, copying the sprite in the above mentioned folder, would make the relative path of the component properly accessible.

PRO

it works seamless both with SSR enabled or not.

CONS

it requires some manual intervention.

Personally speaking I would advocate for this workaround, since the flags.png won't change often and once copied in the expected path it will stay there basically forever.

Workaround 2

You could use the older version of vue-country-flag, namely 2.0.4.

PRO

it does not require particular activity at developer side

CONS

in older versions, the flags image sprite was Base64 encoded, so the component size was higher (around 900 KB). Also, someone reported it did not work on Android apk.

commented

Hi, thanks for your ideas.

The workaround 1 is not a good solution because the library fetch flags.png with a relative path. So it works well for the home page but not for nested ones.

I will downgrade the version of the package for now. Also, it's working, it's just I always have an error in the console.

commented

2.3.1 fixes the issue, thanks for reporting this!