Me gustaría crear un enlace absoluto a los archivos (imágenes, descargas, ...) en mi directorio static , por lo que durante el desarrollo el enlace sería http://localhost/myimage.jpg y una vez implementado debería ser https://www.example.com/myimage.jpg .
¿Existe una forma fácil (por ejemplo, una variable de entorno, etc.) de hacer referencia al nombre de dominio actual en Gatsby?
Me gustaría lograr este comportamiento sin cambiar ningún archivo de configuración.
Un enlace relativo no es una opción en mi caso. La razón es que estoy usando el complemento gatsby-plugin-react-intl que modifica todos los enlaces relativos agregando la configuración regional delante de él, lo que significa que el enlace mencionado anteriormente se convertiría automáticamente en https://www.example.com/en/myimage.jpg en lugar de https://www.example.com/myimage.jpg .
El comportamiento predeterminado es el que describiste. Usando la carpeta estática , una estructura como /static/myimage.jpg será referenciada como https://somedomain.com/myimage.jpg .
El mismo enfoque se aplica a PDF o cualquier activo estático que desee poner a disposición.
A continuación, una estructura como: /static/images/myimage.jpg se convertirá en https://somedomain.com/images/myimage.jpg .
Tenga en cuenta que la estructura de carpetas estáticas se "clona" dentro de la pública una vez que se crea el sitio, por lo que todo lo que contiene se vuelve público. /static se convierte en la ruta raíz una vez clonada.
Sé que este es el comportamiento predeterminado. El problema es que estoy usando
react-intl(o más específicamente,gatsby-plugin-react-intl), que modifica todas estas rutas agregando la configuración regional delante de él, por ejemplo,<img src='/myimage.jpg' /> se convierte en<img src='/en/myimage.jpg />. No es posible usar gatsby-image para todos los propósitos, porque no funciona con SVG, etc. No he descubierto cómo evitar que el complemento haga esto y pensé en saber cómo referirme a su propio dominio en js ( o reaccionar) sería algo que valdría la pena conocer.
Bueno, hay varias formas de apuntar a su dominio actual. Desde window.location.origin ( consulte las advertencias sobre el uso de window u objetos globales en SSR ) hasta los props de location predeterminados expuestos por Gatsby (debido a su extensión de @reach/router , de React). Tenga en cuenta que los props de location solo estarán disponibles en los componentes de nivel superior (páginas), pero puede profundizar o utilizarlos como desee, como cualquier otra propiedad.
Además, el gatsby-plugin-react-intl expone algunos métodos que proporcionan la información del idioma actual, útil para construir su propia ruta estática al activo. Usando:
const { locale } = useIntl();Le dará la configuración regional actual. Puede usarlo para construir su propio activo como:
<img src={`/${locale}/images/myimage.jpg`} /> Esta ruta funcionará ya sea que esté en el desarrollo local o en el dominio de su proyecto alojado, debido a la relatividad. Si aún desea usar el dominio completo, puede usar la location explicada anteriormente (enfoque basado en React) o window.location (enfoque basado en JavaScript).
Con respecto a la modificación automática de activos y rutas estáticas, me temo que es el comportamiento predeterminado del complemento y no he encontrado ninguna forma o método expuesto para cambiarlo de otra manera.