#javascript #reactjs #svg #import
Вопрос:
Я нахожусь в процессе изучения react и наткнулся на проблему с загрузкой изображений в мои компоненты react. Проблема в том, что некоторые изображения, которые я использую, являются обычными растровыми изображениями, которые легко импортировать, а некоторые-SVG. SVG загружаются через API, который позволяет мне перекрашивать их на лету, например, так /api/svg/some-image.svg/fff,222 . Мой сервер разработки react и API находятся на разных портах, поэтому я использую прокси-сервер, чтобы на данный момент все работало вместе.
Проблема в том, что я не могу использовать API для загрузки изображений, потому что react выдаст ошибки компиляции или, в лучшем случае, не сможет разрешить URL-адрес из-за того, что API находится на другом порту. Попытка установить фоновое изображение в CSS также приведет к ошибкам компиляции.
«Традиционный» способ приводит к ошибкам компиляции
import bgImage from '/api/svg/bg1.svg/000';
<div style={{ backgroundImage: `url(${bgImage})` }}></div>
Попытка каким-то образом ввести location.origin URL-адрес не всегда работает должным образом, как, вероятно, ожидалось.
И поэтому я хочу сказать — есть ли какой-либо способ сказать react, чтобы просто поместить указанный URL-адрес нетронутым именно там, где он есть, не пытаясь импортировать ресурс?