[Bug Report] v-img with svg is not loading in Edge

[DeepDiver1975]

Versions and Environment

Vuetify: 1.4.4
Vue: 2.5.22
Browsers: Microsoft Edge
OS: Linux x86_64

Steps to reproduce

Expected Behavior

svg is displayed in Edge

Actual Behavior

svg is not displayed in Edge

Reproduction Link

https://codepen.io/anon/pen/exvygV

Other comments

As far as my debugging goes image.onload is not called and the vuetify code cannot properly set the background image as result

[KaelWD]

Does it work in an <img> tag?

[KaelWD]

Just spun up a VM and it doesn't, so this has nothing to do with us.

[DRoet]

@KaelWD it does work in an img

[DeepDiver1975]

So - I simply cannot use v-img with Edge? Is that what you are trying to tell me?

[KaelWD]

You can, just not with that image. When I tested it with an img tag instead edge just showed a black cross

[DRoet]

Odd, Edge does show it for me using an img tag. seems to be related to svg's tho, v-img with jpg/png works fine

[KaelWD]

Version? My vm's pretty old so I'm running Edge 41.16299.371.0/EdgeHTML 16.16299

[DeepDiver1975]

I'm using Edge 42.17134.1.0

[DRoet]

took me a while to find it, but im using 42.17134.1.0 aswell

[KaelWD]

So I checked again and it has decided to load now for some reason, but there's a weird css issue preventing the v-img from having any width. I'll have to look into it further.

[fuchsvomwalde]

I can confirm that the bug still persists. Please clone and start this very simple landing page with around 100 SVGs: https://github.com/hackerstolz/climathon-spa/tree/v.1.0.0
Only a few are displayed, but for almost 90% of the SVG images the backgound-image attribute is not written into the DOM. From my perspective it's very unlikely that there is a specific problem with the SVG images. All other browsers – desktop as well as mobile – are displaying the SVGs within the v-img component correctly.

Edge: 42.17134.1.0

[12s]

FYI, I got around it using:
<v-sheet tag="img" :src="{url}" >
edge could render images that way. edge has a problem using the background-img css which v-img is using

[michaelscheurer]

Found a working solution with vuetify's <v-img and edge. You have to use the aspect-ration attribute.

Like so

<v-img
    :src="require('@/assets/whatever.svg')"
    :aspect-ratio="undefined"
></v-img>

[DRoet]

should probably still keep this open for the other people

[wuori]

FYI: I was able to get v-img using SVG to display correctly in IE (both v11 and Edge) by specifying height instead of width and using the contain property, like below:

<v-img contain height="45" align="center" style="margin: 0 auto;" src="https://website.com/logo-dark.svg" alt="Logo" />

Not sure why this fixes it vs. using width and contain, but it does.

[kairos0ne]

Experiencing a similar issue now on all browsers. Chrome Firefox and Edge.

<v-img class="logo" v-if="theme.logo" position="left" :src="theme.logo" contain ></v-img>

Tried all workarounds mentioned above and no luck.

Shows jpeg png etc but not svg.

[wuori]

@kairos0ne Did you try it with setting a height value?

[SaschaAusUlm]

What version of Vuetify are you guys using?

[wuori]

@SaschaAusUlm The incident I started chiming in with was 2.2.17

[johnleider]

This is resolved on the latest Edge which uses Chromium (I believe) and I can no longer reproduce the issue.

If you have any additional questions, please reach out to us in our Discord community.