Значки SVG показывают битое изображение при вставке через URL

Question

Я создал простой тег img и установил для его src URL-адрес, как показано ниже:

<img className={"componentImageContainer thumbnailIcon"}
   src="https://componentscendeveussa01.blob..../SVGLogo.svg" />

Этот метод отлично работает для всех типов файлов (png, jpegs, jpgs, bmp), и я уверен, что в процессе рендеринга нет проблем, так как он отлично показывает SVG, если используется локальный путь. Кроме того, нет проблем с URL, потому что они не только присутствуют в базе данных, но также могут быть загружены, но помещают URL в адресную строку браузера. Я пробовал тег object , устанавливая источник через свойство backround-image в css и проверяя тип содержимого, который установлен в заголовках ответа. Он имеет тип application / octet-stream (как и все другие типы файлов). Что может быть причиной того, что при получении SVG-файла отображается разорванное изображение.

Answer 1

Я думаю, вам нужно набросать SVG и загрузить его. Я была такая же проблема. Шрифт в SVG не работал в URL. Поэтому я обрисовал в общих чертах svg в Illustrator. Работал нормально.