Gatsby 自己域内的绝对链接
Absolute links within own domain in Gatsby
我想为我的 static 目录中的文件（图像、下载...）创建一个绝对 link，因此在开发过程中 link 将是 http://localhost/myimage.jpg 部署后应该是 https://www.example.com/myimage.jpg.
有没有简单的方法（例如环境变量等）在 Gatsby 中引用当前域名？
我想在不更改任何配置文件的情况下实现此行为。
亲戚 link 不是我的选择。原因是我使用的插件 gatsby-plugin-react-intl 修改了所有相关的 link ，通过在它前面添加语言环境，意思是，上面提到的 link 会自动变成 https://www.example.com/en/myimage.jpg 而不是 https://www.example.com/myimage.jpg.
默认行为就是您所描述的。使用 static folder，像 /static/myimage.jpg 这样的结构将被引用为 https://somedomain.com/myimage.jpg.
同样的方法适用于 PDF 或您希望提供的任何静态资产。
之后，结构如：/static/images/myimage.jpg 将变为 https://somedomain.com/images/myimage.jpg.
请记住，静态文件夹结构是在 public 中“克隆”的，一旦站点构建完成，所以里面的所有内容都将变为 public。 /static 成为克隆后的根路径。
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.
好吧，有多种方法可以指向您当前的域。来自 window.location.origin（check caveats of using window or global objects in SSR) to the default location props exposed by Gatsby（因为它的扩展来自 @reach/router，来自 React）。请注意 location props 将仅在 top-level 中可用组件（页面），但您可以根据需要向下钻取或使用它，就像任何其他 属性.
此外，gatsby-plugin-react-intl 插件公开了一些提供当前语言信息的方法，可用于构建您自己的资产静态路径。使用：
const { locale } = useIntl();
将为您提供当前的语言环境。您可以使用它来构建自己的资产，例如：
<img src={`/${locale}/images/myimage.jpg`} />
由于相关性，无论您是在本地开发还是在托管项目域中，此路径都适用。如果您仍想使用完整域，则可以使用前面解释的 location（React-based 方法）或 window.location（JavaScript-based 方法）。
关于静态资源和路径的自动修改，恐怕这是默认插件的行为，我还没有找到任何方式或暴露的方法来改变它。
我想为我的 static 目录中的文件（图像、下载...）创建一个绝对 link，因此在开发过程中 link 将是 http://localhost/myimage.jpg 部署后应该是 https://www.example.com/myimage.jpg.
有没有简单的方法（例如环境变量等）在 Gatsby 中引用当前域名？
我想在不更改任何配置文件的情况下实现此行为。
亲戚 link 不是我的选择。原因是我使用的插件 gatsby-plugin-react-intl 修改了所有相关的 link ，通过在它前面添加语言环境，意思是，上面提到的 link 会自动变成 https://www.example.com/en/myimage.jpg 而不是 https://www.example.com/myimage.jpg.
默认行为就是您所描述的。使用 static folder，像 /static/myimage.jpg 这样的结构将被引用为 https://somedomain.com/myimage.jpg.
同样的方法适用于 PDF 或您希望提供的任何静态资产。
之后，结构如：/static/images/myimage.jpg 将变为 https://somedomain.com/images/myimage.jpg.
请记住，静态文件夹结构是在 public 中“克隆”的，一旦站点构建完成，所以里面的所有内容都将变为 public。 /static 成为克隆后的根路径。
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.
好吧，有多种方法可以指向您当前的域。来自 window.location.origin（check caveats of using window or global objects in SSR) to the default location props exposed by Gatsby（因为它的扩展来自 @reach/router，来自 React）。请注意 location props 将仅在 top-level 中可用组件（页面），但您可以根据需要向下钻取或使用它，就像任何其他 属性.
此外，gatsby-plugin-react-intl 插件公开了一些提供当前语言信息的方法，可用于构建您自己的资产静态路径。使用：
const { locale } = useIntl();
将为您提供当前的语言环境。您可以使用它来构建自己的资产，例如：
<img src={`/${locale}/images/myimage.jpg`} />
由于相关性，无论您是在本地开发还是在托管项目域中，此路径都适用。如果您仍想使用完整域，则可以使用前面解释的 location（React-based 方法）或 window.location（JavaScript-based 方法）。
关于静态资源和路径的自动修改，恐怕这是默认插件的行为，我还没有找到任何方式或暴露的方法来改变它。