search

LeCoupa / vueflags

🇺🇸🇫🇷 One easy-to-use flag component for Vue.js with all ISO 3166-1 countries.
https://www.growthbunker.dev/vueflags
MIT License
117 stars 37 forks source link

SVG images not showing on Chromium based browsers (Edge and Chrome) #22

Open relief-melone opened 3 years ago

relief-melone commented 3 years ago

It seems as if chromium based browsers can cause problems with the way flags are represented in the dom

currently

<img alt="gb" src="/path/to/flags/gb.svg" class="flag mx-3 gb-flag gb-flag--small" />

However if it is represented as an object it will work working alternative

<object type="image/svg+xml" data="/path/to/flags/de.svg" class="flag gb-flag gb-flag--small"></object>

I don't know if this has something to do with in my case vue.js because it obviously works in chrome on your home page. But other than that I couldn't spot any difference in my code.

relief-melone commented 3 years ago

Alright. The issue was me serving the static content via a backend that didn't set the content-type header for svg files with

image/svg+xml

However it still be nice to add the flags as object instead of svg since the user won't have to worry about the content-type header in this case.

I could do a pull request to add this feature via prop (something like useObjectTag). Tell me if you're interested ;) should't be too much of work