I'm letting the user upload an SVG image, and I'm trying to show it to him.
The image is showing nicely on Edge, Firefox and Chrome but not on IE11. When I'm entering debug mode, it looks like the data URI is different on IE and on Chrome. When I'm copying the data URI that I'm having in Chrome to IE, it's working.
What is the problem? Why is IE changing the data URI?
Here is the code
<img class="large-icon img large-icon-img user-img" id="large-icon" src="" style="height: 96px; width: 96px;">
Check the fiddle
Thx
Solved it,
The problem was that for using data URI in IE11 the URI must be in base64. so i took the SVG data and used 'btoa' function on it and added 'svg+xml;base64' as his MIME type.
<img src={`data:image/svg+xml;base64,${window.btoa(data)}`} />