URI данных SVG в теге IMG не отображается в IE11

Я позволяю пользователю загрузить изображение SVG и пытаюсь показать его ему.

Изображение хорошо отображается в Edge, Firefox и Chrome, но не в IE11. Когда я вхожу в режим отладки, похоже, что URI данных отличается в IE и в Chrome. Когда я копирую URI данных, который у меня есть в Chrome, в IE, он работает.

В чем проблема? Почему IE меняет URI данных?

Вот код

<img class="large-icon img large-icon-img user-img" id="large-icon" src="" style="height: 96px; width: 96px;">

Проверьте скрипту.

Спасибо


svg image internet-explorer-11 data-uri
person Lior Sharabi    schedule 05.11.2018    source источник
comment
Единственное, что есть в вашем SVG, — это PNG-изображение. Зачем вообще возиться с SVG? Вы не получаете никаких преимуществ формата SVG. Просто используйте сам PNG.   -  person Paul LeBeau    schedule 05.11.2018
comment
В любом случае... это, вероятно, дубликат stackoverflow.com/questions/32870788/   -  person Paul LeBeau    schedule 05.11.2018

Ответы (1)


arrow_upward
4
arrow_downward

Решил это,

Проблема заключалась в том, что для использования URI данных в IE11 URI должен быть в base64. поэтому я взял данные SVG и применил к ним функцию «btoa» и добавил «svg + xml; base64» в качестве его типа MIME.

<img src={`data:image/svg+xml;base64,${window.btoa(data)}`} />
person Lior Sharabi    schedule 05.11.2018
comment
@ Лиор, я вижу, ты решил свою проблему. Я предлагаю вам отметить свой последний ответ, поскольку ответ для этой темы может помочь другим участникам в будущем. - person Deepak-MSFT; 06.11.2018