I'm in process of learning react and I've stumbled upon an issue with loading images in my react components. The issue is that some images I'm using are normal raster images that are easy to import, and some are SVGs. The SVGs are loaded through an API that lets me recolor them on the fly like so - /api/svg/some-image.svg/fff,222. My react development server and the API are on different ports so I'm using a proxy to get everything working together for the time being.

The issue is that I can not use the API to load images because react will throw compile errors, or at best won't be able to resolve the URL due to the API being on a different port. Trying to set the background image in CSS will also throw compilation errors.

The "traditional" way throws compile errors

import bgImage from '/api/svg/bg1.svg/000';
<div style={{ backgroundImage: `url(${bgImage})` }}></div>

Trying to somehow force the location.origin into the URL doesn't always properly work too as probably expected.

And so my point is - Is there any way to tell react to just put the specified URL untouched exactly where it is without it trying to import the resource?