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

[relief-melone]

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]

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