Estoy en proceso de aprender a reaccionar y me he topado con un problema al cargar imágenes en mis componentes de reacción. El problema es que algunas imágenes que estoy usando son imágenes rasterizadas normales que son fáciles de importar y algunas son SVG. Los SVG se cargan a través de una API que me permite volver a colorearlos sobre la marcha así - /api/svg/some-image.svg/fff,222 . Mi servidor de desarrollo de reacción y la API están en puertos diferentes, por lo que estoy usando un proxy para que todo funcione en conjunto por el momento.

El problema es que no puedo usar la API para cargar imágenes porque la reacción generará errores de compilación o, en el mejor de los casos, no podrá resolver la URL debido a que la API está en un puerto diferente. Intentar configurar la imagen de fondo en CSS también generará errores de compilación.

La forma "tradicional" arroja errores de compilación

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

Intentar forzar de alguna manera la location.origin en la URL no siempre funciona correctamente como probablemente se esperaba.

Entonces, mi punto es: ¿hay alguna forma de saber reaccionar para simplemente poner la URL especificada intacta exactamente donde está sin intentar importar el recurso?