HTML-элемент img (или v-img) не загружает SVG, запрос имеет статус 200, но пустой ответ в Dev Tools > Network, нет пробл ⇐ Html

[Anonymous]

Я пытаюсь загрузить изображение SVG в веб-приложение Veutify/Vue, не встраивая SVG в пакет сборки проекта. Я хочу динамически загружать изображение во время выполнения. При ссылке на изображение через элемент src в компоненте v-img файл не загружается, хотя от сервера получен ответ со статусом 200. Я попытался упростить v-img до простого элемента html img, но проблема не устранена.
В инструментах разработки Chrome запрос/ответ отображается с кодом состояния 200, но ответ отображается как пустой. В консоли ошибок нет. Добавление обработчика ошибок приведет к запуску прикрепленной функции, но не укажет причину ошибки. При открытии того же URL-адреса изображения в браузере отображается исходный код изображения SVG с сообщением «Похоже, что с этим XML-файлом не связана какая-либо информация о стиле. Дерево документа показано ниже». Я попытался добавить заголовки политики безопасности контента (CSP), чтобы исправить любые проблемы CORS, но это не помогло.
Этапы воспроизведения:
Простой HTML-элемент img, встроенный в действительный HTML-документ:

Код: Выделить всё

[img]example.svg[/img]

Содержимое файла SVG:

Код: Выделить всё

Development

В Visual Studio Code я вижу сообщение «Произошла ошибка при загрузке изображения. Открыть файл с помощью стандартного текстового/двоичного редактора VS Code?» Изображение было создано с помощью онлайн-инструмента, поэтому предполагается, что это действительный код SVG. Его можно просмотреть в других редакторах.


Подробнее здесь: https://stackoverflow.com/questions/798 ... -but-empty