Absolute links within own domain in Gatsby

user_18261332 0
Viewed 171

I would like to create an absolute link to files (images, downloads, ...) in my static directory, so during development the link would be http://localhost/myimage.jpg and once deployed it should be https://www.example.com/myimage.jpg.

Is there an easy way (e.g. an environment variable etc.) to reference the current domain name in Gatsby?

I would like to achieve this behavior without changing any config files.

A relative link is not an option in my case. The reason is that I am using the plugin gatsby-plugin-react-intl which modifies all relative links by adding the locale in front of it, meaning, the above mentioned link would automatically turn into https://www.example.com/en/myimage.jpg instead of https://www.example.com/myimage.jpg.

gatsby reactjs javascript
1 Answers

The default behavior is what you described. Using the static folder, a structure like /static/myimage.jpg will be referenced as https://somedomain.com/myimage.jpg.

The same approach applies to PDF or any static asset you wish to make available.

Following that, a structure like: /static/images/myimage.jpg will become https://somedomain.com/images/myimage.jpg.

Keep in mind that the static folder structure is "cloned" inside the public one once the site is built so everything inside will become public. /static becomes the root path once cloned.

I know that this is the default behavior. The problem is, that I'm using react-intl (or more specifically, gatsby-plugin-react-intl), which modifies all these paths by adding the locale in front of it, e.g. <img src='/myimage.jpg' /> becomes <img src='/en/myimage.jpg />. Using gatsby-image for all purposes is not possible, because it doesn't work with SVGs etc. I haven't figured out how to stop the plugin from doing this and I thought knowing how to refer to a your own domain in js (or react) would be something worth knowing.

Well, there are multiple ways to point to your current domain. From the window.location.origin (check caveats of using window or global objects in SSR) to the default location props exposed by Gatsby (because its extension from @reach/router, from React). Note that location props will be only available in top-level components (pages) but you can drill down or use it as you wish, as any other property.

In addition, the gatsby-plugin-react-intl plugin exposes some methods that provide the current language information, useful to build your own static path to the asset. Using:

  const { locale } = useIntl();

Will give you the current locale. You can use it to build your own asset like:

  <img src={`/${locale}/images/myimage.jpg`} />

This path will work whether you are in local development or in your hosted project domain, because of the relativity. If you still want to use the full domain, you can use the previously explained location (React-based approach) or the window.location (JavaScript-based approach).

Regarding the automatic modification of static assets and paths, I'm afraid it's the default plugin's behavior and I haven't found any way or exposed method to change it otherwise.

user_55853710
Related