I'm creating a multi-language Gatsby site using gatsby-plugin-intl and routing worked fine, but it introduced some issues with files in static
folder.
In my gatsby-config.js
file I got
{
resolve: `gatsby-plugin-intl`,
options: {
// language JSON resource path
path: `${__dirname}/src/intl`,
// supported language
languages: [`es`, `en`],
// language file path
defaultLanguage: `es`,
// option to redirect to `/es` when connecting `/`
redirect: false,
},
},
Then in my landingPage.js
component
<img
className="w-36 text-secundario fill-current"
src="massick-2x3.svg"
alt="Logo"
/>
There, src="massick-2x3.svg"
means that the file is in static/massick-2x3.svg
, which works fine with default language Spanish (there's no redirect to /es
when connecting /
) but then I get a 404 error for English, as the src
changed to static/en/massick-2x3.svg
, which doesn't exist.
As a workaround, I created es
and en
subfolders in static
and copied all the content of static
to both of them, and it's working. However, this is less than ideal, I have 3 copies of every asset.
I was wondering if there's a way of prevent this behavior.
If you need more info, this is my repo