Vuetify: [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 fucking 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.

[daniandl]

Sorry to necro, but have there been any updates regarding this? I think I'm facing this issue in Edge 41 with regular images, no svg. There seems to be no width whatsoever. The only time the image is visible, is if there's content inside the tag.

Microsoft Edge 41.16299.967.0
Microsoft EdgeHTML 16.16299

[Mikilll94]

I also have the same problem. The image is not showing in Microsoft Edge. On other browsers image it is showing correctly.

Here is my code:

        <v-layout>
          <v-flex xs12 sm8 offset-sm2>
            <v-container fluid>
              <v-img :src="require('../assets/sample_image.jpg')"/>
            </v-container>
          </v-flex>
        </v-layout>

I was testing on Microsoft Edge 41.16299.967.0

[zajca]

I have same issue on edge same version like @daniandl (this is older but supported version of edge, not sure about 44.17763 which is current)
Bug can be seen in documentation page, this is output:

[hungnm10]

Is there any update related this issue? I have a same issue with v-img in Edge.

[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

[alfredriesen]

Some Edge Version continue not to display v-img. Are there any afforts to solve this problem?

[alfredriesen]

@KaelWD can you explain this strange behaviour you commented above? About "there's a weird css issue preventing the v-img from having any width"

[ziggybrew]

On Edge 40.15063.674.0

Just ran into this issue using png, jpg, and svg and no images showed up using the tag in Edge. Has anyone found a fix for this yet? I ended up switching the tags to just regular tags for now

[SaschaAusUlm]

We are running into the same issue with png images. Some show up. Some don't.

Edge 41.16299.1004.0

shows the problem.

Edge 44.18362.329.0

doesn't. It needs to be fixed. Of course we could remove all v-img tags with img .... but that doesn't seem to be a practical solution.

[12s]

v-img not working for me in edge 41.16299 as well.

This ticket is from Feb. 1. Is there no plan to fix?

[michaelscheurer]

Same Issue here.

[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 aspect-ration attribute.

Like so

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

[DeepDiver1975]

We no longer use vuetify and also no longer support ie -> close
THX for all you support

[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.

[douglasg14b]

Having the same issue with Firefox.... v-img doesn't display SVG images....

Seems like a bit of an issue.

[pecataToshev]

Same issue on Firefox 76.0.1

[kairos0ne]

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

` class="logo"
v-if="theme.logo"
position="left"
:src="theme.logo"
contain

`

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