Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
DeepDiver1975 opened this issue Feb 1, 2019 · 33 comments
Closed

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

DeepDiver1975 opened this issue Feb 1, 2019 · 33 comments
Assignees
Labels
C: VImg VImg platform specific The issue only occurs on a specific platform T: bug Functionality that does not work as intended/expected

Comments

@DeepDiver1975
Copy link

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
Copy link
Member

KaelWD commented Feb 1, 2019

Does it work in an <img> tag?

@KaelWD KaelWD added the platform specific The issue only occurs on a specific platform label Feb 1, 2019
@KaelWD
Copy link
Member

KaelWD commented Feb 1, 2019

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

@KaelWD KaelWD closed this as completed Feb 1, 2019
@KaelWD KaelWD added the wontfix The issue is expected and will not be fixed label Feb 1, 2019
@DRoet
Copy link
Contributor

DRoet commented Feb 1, 2019

@KaelWD it does work in an img

@DeepDiver1975
Copy link
Author

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

@KaelWD
Copy link
Member

KaelWD commented Feb 1, 2019

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

@DRoet
Copy link
Contributor

DRoet commented Feb 1, 2019

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
Copy link
Member

KaelWD commented Feb 1, 2019

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

@DeepDiver1975
Copy link
Author

I'm using Edge 42.17134.1.0

@DRoet
Copy link
Contributor

DRoet commented Feb 1, 2019

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

@KaelWD
Copy link
Member

KaelWD commented Feb 1, 2019

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.

@KaelWD KaelWD reopened this Feb 1, 2019
@KaelWD KaelWD added T: bug Functionality that does not work as intended/expected and removed wontfix The issue is expected and will not be fixed labels Feb 1, 2019
@daniandl

This comment has been minimized.

@Mikilll94

This comment has been minimized.

@zajca

This comment has been minimized.

@hungnm10

This comment has been minimized.

@fuchsvomwalde
Copy link

fuchsvomwalde commented Jul 27, 2019

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

This comment has been minimized.

@alfredriesen

This comment has been minimized.

@ziggybrew

This comment has been minimized.

@SaschaAusUlm

This comment has been minimized.

@12s

This comment has been minimized.

@michaelscheurer

This comment has been minimized.

@12s
Copy link

12s commented Nov 13, 2019

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
Copy link

michaelscheurer commented Nov 13, 2019

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>

@DeepDiver1975

This comment has been minimized.

@DRoet
Copy link
Contributor

DRoet commented Mar 10, 2020

should probably still keep this open for the other people

@DRoet DRoet reopened this Mar 10, 2020
@wuori
Copy link

wuori commented Apr 3, 2020

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

This comment has been minimized.

@pecataToshev

This comment has been minimized.

@kairos0ne
Copy link

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
Copy link

wuori commented Jun 19, 2020

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

@SaschaAusUlm
Copy link

What version of Vuetify are you guys using?

@wuori
Copy link

wuori commented Jul 10, 2020

@SaschaAusUlm The incident I started chiming in with was 2.2.17

@johnleider
Copy link
Member

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.

@johnleider johnleider self-assigned this Dec 3, 2020
@vuetifyjs vuetifyjs locked as resolved and limited conversation to collaborators Dec 3, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
C: VImg VImg platform specific The issue only occurs on a specific platform T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

No branches or pull requests