Base64 SVG не может показать изображение

Моя строка Base64 не может отображать изображения в моем HTML но когда я открываю его в новой вкладке, могут появляться изображения

Это моя строка

<img src = "data:image/svg+xml;charset=utf-8;base64,PHN2ZyBpZD0iU3ZnanNTdmcxMDAxIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpzdmdqcz0iaHR0cDovL3N2Z2pzLmNvbS9zdmdqcyI+PGRlZnMgaWQ9IlN2Z2pzRGVmczEwMDIiPjxjbGlwUGF0aCBpZD0iU3ZnanNDbGlwUGF0aDEwNDIiPjxwb2x5Z29uIGlkPSJTdmdqc1BvbHlnb24xMDA4IiBwb2ludHM9IjE2MiwyMCAxMTIsNDIgNzMsNjMgNjAsNzYgMzMsMTQ5IDEwLDE5NyA1MCwyMzAgOTQsMjM2IDEwMSwyMTggMTExLDI4MCA5MywzODAgODgsNDMzIDE3MCw0NjMgMjc2LDQ2MyAzNTIsNDMzIDMzOSwzMzYgMzMzLDI2MyAzMzQsMjEzIDM0MCwyMzAgMzkwLDIyMSA0MjUsMTk1IDM5NCwxMjggMzcwLDY4IDMyOSw0NSAyOTQsMzAgMjY0LDIwIDI2OSwzMyAyNDAsNjIgMjEzLDc4IDE3OSw1NyAxNTcsMzQiIHN0cm9rZT0iI2ZmMDA2NiIgZmlsbD0iIzAwMDAwMCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjQiLz48L2NsaXBQYXRoPjwvZGVmcz48aW1hZ2UgaWQ9IlN2Z2pzSW1hZ2UxMDA5IiB4bGluazpocmVmPSJodHRwczovL2kyLndwLmNvbS9iZWVib20uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzAxL1JldmVyc2UtSW1hZ2UtU2VhcmNoLUVuZ2luZXMtQXBwcy1BbmQtSXRzLVVzZXMtMjAxNi5qcGciIHdpZHRoPSI1NDYiIGhlaWdodD0iNjgyIiB4PSItMzAiIHk9Ii0zMCIgY2xpcC1wYXRoPSJ1cmwoJnF1b3Q7I1N2Z2pzQ2xpcFBhdGgxMDQyJnF1b3Q7KSIvPjxnIGlkPSJTdmdqc0cxMDEwIiB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwxLDEwLDIwKSI+PGNpcmNsZSBpZD0iU3ZnanNDaXJjbGUxMDExIiByPSIzLjUiIGN4PSIxNTIiIGN5PSIwIiBjbGFzcz0ic3ZnX3NlbGVjdF9wb2ludHMgc3ZnX3NlbGVjdF9wb2ludHNfcG9pbnQiLz48Y2lyY2xlIGlkPSJTdmdqc0NpcmNsZTEwMTIiIHI9IjMuNSIgY3g9IjEwMiIgY3k9IjIyIiBjbGFzcz0ic3ZnX3NlbGVjdF9wb2ludHMgc3ZnX3NlbGVjdF9wb2ludHNfcG9pbnQiLz48Y2lyY2xlIGlkPSJTdmdqc0NpcmNsZTEwMTMiIHI9IjMuNSIgY3g9IjYzIiBjeT0iNDMiIGNsYXNzPSJzdmdfc2VsZWN0X3BvaW50cyBzdmdfc2VsZWN0X3BvaW50c19wb2ludCIvPjxjaXJjbGUgaWQ9IlN2Z2pzQ2lyY2xlMTAxNCIgcj0iMy41IiBjeD0iNTAiIGN5PSI1NiIgY2xhc3M9InN2Z19zZWxlY3RfcG9pbnRzIHN2Z19zZWxlY3RfcG9pbnRzX3BvaW50Ii8+PGNpcmNsZSBpZD0iU3ZnanNDaXJjbGUxMDE1IiByPSIzLjUiIGN4PSIyMyIgY3k9IjEyOSIgY2xhc3M9InN2Z19zZWxlY3RfcG9pbnRzIHN2Z19zZWxlY3RfcG9pbnRzX3BvaW50Ii8+PGNpcmNsZSBpZD0iU3ZnanNDaXJjbGUxMDE2IiByPSIzLjUiIGN4PSIwIiBjeT0iMTc3IiBjbGFzcz0ic3ZnX3NlbGVjdF9wb2ludHMgc3ZnX3NlbGVjdF9wb2ludHNfcG9pbnQiLz48Y2lyY2xlIGlkPSJTdmdqc0NpcmNsZTEwMTciIHI9IjMuNSIgY3g9IjQwIiBjeT0iMjEwIiBjbGFzcz0ic3ZnX3NlbGVjdF9wb2ludHMgc3ZnX3NlbGVjdF9wb2ludHNfcG9pbnQiLz48Y2lyY2xlIGlkPSJTdmdqc0NpcmNsZTEwMTgiIHI9IjMuNSIgY3g9Ijg0IiBjeT0iMjE2IiBjbGFzcz0ic3ZnX3NlbGVjdF9wb2ludHMgc3ZnX3NlbGVjdF9wb2ludHNfcG9pbnQiLz48Y2lyY2xlIGlkPSJTdmdqc0NpcmNsZTEwMTkiIHI9IjMuNSIgY3g9IjkxIiBjeT0iMTk4IiBjbGFzcz0ic3ZnX3NlbGVjdF9wb2ludHMgc3ZnX3NlbGVjdF9wb2ludHNfcG9pbnQiLz48Y2lyY2xlIGlkPSJTdmdqc0NpcmNsZTEwMjAiIHI9IjMuNSIgY3g9IjEwMSIgY3k9IjI2MCIgY2xhc3M9InN2Z19zZWxlY3RfcG9pbnRzIHN2Z19zZWxlY3RfcG9pbnRzX3BvaW50Ii8+PGNpcmNsZSBpZD0iU3ZnanNDaXJjbGUxMDIxIiByPSIzLjUiIGN4PSI4MyIgY3k9IjM2MCIgY2xhc3M9InN2Z19zZWxlY3RfcG9pbnRzIHN2Z19zZWxlY3RfcG9pbnRzX3BvaW50Ii8+PGNpcmNsZSBpZD0iU3ZnanNDaXJjbGUxMDIyIiByPSIzLjUiIGN4PSI3OCIgY3k9IjQxMyIgY2xhc3M9InN2Z19zZWxlY3RfcG9pbnRzIHN2Z19zZWxlY3RfcG9pbnRzX3BvaW50Ii8+PGNpcmNsZSBpZD0iU3ZnanNDaXJjbGUxMDIzIiByPSIzLjUiIGN4PSIxNjAiIGN5PSI0NDMiIGNsYXNzPSJzdmdfc2VsZWN0X3BvaW50cyBzdmdfc2VsZWN0X3BvaW50c19wb2ludCIvPjxjaXJjbGUgaWQ9IlN2Z2pzQ2lyY2xlMTAyNCIgcj0iMy41IiBjeD0iMjY2IiBjeT0iNDQzIiBjbGFzcz0ic3ZnX3NlbGVjdF9wb2ludHMgc3ZnX3NlbGVjdF9wb2ludHNfcG9pbnQiLz48Y2lyY2xlIGlkPSJTdmdqc0NpcmNsZTEwMjUiIHI9IjMuNSIgY3g9IjM0MiIgY3k9IjQxMyIgY2xhc3M9InN2Z19zZWxlY3RfcG9pbnRzIHN2Z19zZWxlY3RfcG9pbnRzX3BvaW50Ii8+PGNpcmNsZSBpZD0iU3ZnanNDaXJjbGUxMDI2IiByPSIzLjUiIGN4PSIzMjkiIGN5PSIzMTYiIGNsYXNzPSJzdmdfc2VsZWN0X3BvaW50cyBzdmdfc2VsZWN0X3BvaW50c19wb2ludCIvPjxjaXJjbGUgaWQ9IlN2Z2pzQ2lyY2xlMTAyNyIgcj0iMy41IiBjeD0iMzIzIiBjeT0iMjQzIiBjbGFzcz0ic3ZnX3NlbGVjdF9wb2ludHMgc3ZnX3NlbGVjdF9wb2ludHNfcG9pbnQiLz48Y2lyY2xlIGlkPSJTdmdqc0NpcmNsZTEwMjgiIHI9IjMuNSIgY3g9IjMyNCIgY3k9IjE5MyIgY2xhc3M9InN2Z19zZWxlY3RfcG9pbnRzIHN2Z19zZWxlY3RfcG9pbnRzX3BvaW50Ii8+PGNpcmNsZSBpZD0iU3ZnanNDaXJjbGUxMDI5IiByPSIzLjUiIGN4PSIzMzAiIGN5PSIyMTAiIGNsYXNzPSJzdmdfc2VsZWN0X3BvaW50cyBzdmdfc2VsZWN0X3BvaW50c19wb2ludCIvPjxjaXJjbGUgaWQ9IlN2Z2pzQ2lyY2xlMTAzMCIgcj0iMy41IiBjeD0iMzgwIiBjeT0iMjAxIiBjbGFzcz0ic3ZnX3NlbGVjdF9wb2ludHMgc3ZnX3NlbGVjdF9wb2ludHNfcG9pbnQiLz48Y2lyY2xlIGlkPSJTdmdqc0NpcmNsZTEwMzEiIHI9IjMuNSIgY3g9IjQxNSIgY3k9IjE3NSIgY2xhc3M9InN2Z19zZWxlY3RfcG9pbnRzIHN2Z19zZWxlY3RfcG9pbnRzX3BvaW50Ii8+PGNpcmNsZSBpZD0iU3ZnanNDaXJjbGUxMDMyIiByPSIzLjUiIGN4PSIzODQiIGN5PSIxMDgiIGNsYXNzPSJzdmdfc2VsZWN0X3BvaW50cyBzdmdfc2VsZWN0X3BvaW50c19wb2ludCIvPjxjaXJjbGUgaWQ9IlN2Z2pzQ2lyY2xlMTAzMyIgcj0iMy41IiBjeD0iMzYwIiBjeT0iNDgiIGNsYXNzPSJzdmdfc2VsZWN0X3BvaW50cyBzdmdfc2VsZWN0X3BvaW50c19wb2ludCIvPjxjaXJjbGUgaWQ9IlN2Z2pzQ2lyY2xlMTAzNCIgcj0iMy41IiBjeD0iMzE5IiBjeT0iMjUiIGNsYXNzPSJzdmdfc2VsZWN0X3BvaW50cyBzdmdfc2VsZWN0X3BvaW50c19wb2ludCIvPjxjaXJjbGUgaWQ9IlN2Z2pzQ2lyY2xlMTAzNSIgcj0iMy41IiBjeD0iMjg0IiBjeT0iMTAiIGNsYXNzPSJzdmdfc2VsZWN0X3BvaW50cyBzdmdfc2VsZWN0X3BvaW50c19wb2ludCIvPjxjaXJjbGUgaWQ9IlN2Z2pzQ2lyY2xlMTAzNiIgcj0iMy41IiBjeD0iMjU0IiBjeT0iMCIgY2xhc3M9InN2Z19zZWxlY3RfcG9pbnRzIHN2Z19zZWxlY3RfcG9pbnRzX3BvaW50Ii8+PGNpcmNsZSBpZD0iU3ZnanNDaXJjbGUxMDM3IiByPSIzLjUiIGN4PSIyNTkiIGN5PSIxMyIgY2xhc3M9InN2Z19zZWxlY3RfcG9pbnRzIHN2Z19zZWxlY3RfcG9pbnRzX3BvaW50Ii8+PGNpcmNsZSBpZD0iU3ZnanNDaXJjbGUxMDM4IiByPSIzLjUiIGN4PSIyMzAiIGN5PSI0MiIgY2xhc3M9InN2Z19zZWxlY3RfcG9pbnRzIHN2Z19zZWxlY3RfcG9pbnRzX3BvaW50Ii8+PGNpcmNsZSBpZD0iU3ZnanNDaXJjbGUxMDM5IiByPSIzLjUiIGN4PSIyMDMiIGN5PSI1OCIgY2xhc3M9InN2Z19zZWxlY3RfcG9pbnRzIHN2Z19zZWxlY3RfcG9pbnRzX3BvaW50Ii8+PGNpcmNsZSBpZD0iU3ZnanNDaXJjbGUxMDQwIiByPSIzLjUiIGN4PSIxNjkiIGN5PSIzNyIgY2xhc3M9InN2Z19zZWxlY3RfcG9pbnRzIHN2Z19zZWxlY3RfcG9pbnRzX3BvaW50Ii8+PGNpcmNsZSBpZD0iU3ZnanNDaXJjbGUxMDQxIiByPSIzLjUiIGN4PSIxNDciIGN5PSIxNCIgY2xhc3M9InN2Z19zZWxlY3RfcG9pbnRzIHN2Z19zZWxlY3RfcG9pbnRzX3BvaW50Ii8+PC9nPjwvc3ZnPg= = ">

Это COnverted из моего svg

<svg id = "SvgjsSvg1001" width = "500" height = "520" xmlns = "http://www.w3.org/2000/svg" version = "1.1" xmlns:xlink = "http://www.w3.org/1999/xlink" xmlns:svgjs = "http://svgjs.dev/svgjs"><defs id = "SvgjsDefs1002"><clipPath id = "SvgjsClipPath1042"><polygon id = "SvgjsPolygon1008" points = "162,20 112,42 73,63 60,76 33,149 10,197 50,230 94,236 101,218 111,280 93,380 88,433 170,463 276,463 352,433 339,336 333,263 334,213 340,230 390,221 425,195 394,128 370,68 329,45 294,30 264,20 269,33 240,62 213,78 179,57 157,34" stroke = "#ff0066" fill = "#000000" stroke-linejoin = "round" stroke-linecap = "round" stroke-width = "4"></polygon></clipPath></defs><image id = "SvgjsImage1009" xlink:href = "https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" width = "546" height = "682" x = "-30" y = "-30" clip-path = "url(&quot;#SvgjsClipPath1042&quot;)"></image><g id = "SvgjsG1010" transform = "matrix(1,0,0,1,10,20)"><circle id = "SvgjsCircle1011" r = "3.5" cx = "152" cy = "0" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1012" r = "3.5" cx = "102" cy = "22" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1013" r = "3.5" cx = "63" cy = "43" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1014" r = "3.5" cx = "50" cy = "56" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1015" r = "3.5" cx = "23" cy = "129" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1016" r = "3.5" cx = "0" cy = "177" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1017" r = "3.5" cx = "40" cy = "210" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1018" r = "3.5" cx = "84" cy = "216" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1019" r = "3.5" cx = "91" cy = "198" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1020" r = "3.5" cx = "101" cy = "260" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1021" r = "3.5" cx = "83" cy = "360" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1022" r = "3.5" cx = "78" cy = "413" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1023" r = "3.5" cx = "160" cy = "443" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1024" r = "3.5" cx = "266" cy = "443" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1025" r = "3.5" cx = "342" cy = "413" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1026" r = "3.5" cx = "329" cy = "316" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1027" r = "3.5" cx = "323" cy = "243" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1028" r = "3.5" cx = "324" cy = "193" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1029" r = "3.5" cx = "330" cy = "210" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1030" r = "3.5" cx = "380" cy = "201" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1031" r = "3.5" cx = "415" cy = "175" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1032" r = "3.5" cx = "384" cy = "108" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1033" r = "3.5" cx = "360" cy = "48" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1034" r = "3.5" cx = "319" cy = "25" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1035" r = "3.5" cx = "284" cy = "10" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1036" r = "3.5" cx = "254" cy = "0" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1037" r = "3.5" cx = "259" cy = "13" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1038" r = "3.5" cx = "230" cy = "42" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1039" r = "3.5" cx = "203" cy = "58" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1040" r = "3.5" cx = "169" cy = "37" class = "svg_select_points svg_select_points_point"></circle><circle id = "SvgjsCircle1041" r = "3.5" cx = "147" cy = "14" class = "svg_select_points svg_select_points_point"></circle></g></svg>

Это предварительный просмотр

Это если я открою его в новой вкладке

Он работает в Firefox 63.0a1. Вы пробовали проверять изображение, отлаживать его и т. д.?

Sebastian Simon 14.08.2018 10:56

Я включил превью изображения

Barraaa 14.08.2018 12:24
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
32
0

Другие вопросы по теме