How to prevent gatsby-plugin-intl from localize static folder assets' urls

Question

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

Answer 1

The project seems to be abandoned or discontinued (last commit from 3 years ago), for that reason it may not be fully compatible with your running Gatsby version (which is the latest).

I'd faced the same kind of weird behaviors with that plugin when upgrading my old projects to the newest Gatsby versions; in my Gatsby v2 versions, the plugin worked perfectly but from 3.4 onwards start behaving oddly.

I'd suggest migrating/moving towards gatsby-plugin-react-i18next plugin where the configuration it's quite similar and it shouldn't be a big deal. It's also what it's suggested from this GitHub thread (from the same plugin repo)