placeholderUrl variables only get replaced once

[carlostbb]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I'm following the doc that shows how to add image CDN support to a source plugin, however I'm currently having a problem where only the first instance of each variable in the placeholderUrl is replaced when in my case I need to be able to set it twice in the url.

This is how I am creating the node for the image and how the placeholderUrl is set:

  createNode({
    ...recipe.image,
    filename: recipe.image.url,
    placeholderUrl: `${recipe.image.url}?im=Resize,height=320;Crop,size=(%width%,%height%),gravity=Center`,
    alt: recipe.name,
    id: imageNodeId,
    parent: null,
    children: [],
    internal: {
      type: 'RecipeImage',
      contentDigest: createContentDigest(recipe.image)
    }
  });

This is the error I get because the %height% is only replaced once:

Unable to fetch:
https://assets.unileversolutions.com/recipes-v2/100881.jpg?im=Resize,height=112;Crop,size=(200,%height%),gravity=Center
---
Reason: URI malformed
---
Fetch details:
{
  "attempt": 3,
  "method": "GET",
  "errorCode": "ERR_GOT_REQUEST_ERROR",
  "requestHeaders": {
    "user-agent": "got (https://github.com/sindresorhus/got)"
  }
}
---

Reproduction Link

Steps to Reproduce

1. Create a new Gatsby app
2. Create a custom source plugin and follow the steps to add support for Image CDNs https://www.gatsbyjs.com/docs/tutorial/creating-a-source-plugin/part-6/#use-image-cdn-in-your-site but put either %width% or %height% twice in the url.

Expected Result

The image is returned with all instances of %width% or %height% replaced.

Actual Result

Only the first instance of each variable is replaced.

Environment

System:
    OS: macOS 13.6
    CPU: (8) x64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    Yarn: 1.22.19 - ~/npm/bin/yarn
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
  Languages:
    Python: 3.9.13 - /Users/carlos.cunha/.pyenv/shims/python
  Browsers:
    Chrome: 117.0.5938.92
    Edge: 117.0.2045.47
    Safari: 16.6
  npmPackages:
    gatsby: ^5.12.4 => 5.12.5 
    gatsby-plugin-canonical-urls: ^5.12.0 => 5.12.0 
    gatsby-plugin-create-client-paths: ^4.9.0 => 4.9.0 
    gatsby-plugin-google-analytics: ^5.12.0 => 5.12.0 
    gatsby-plugin-google-gtag: ^5.12.0 => 5.12.0 
    gatsby-plugin-image: ^3.12.0 => 3.12.0 
    gatsby-plugin-loadable-components-ssr: ^4.3.2 => 4.3.2 
    gatsby-plugin-lodash: ^6.12.0 => 6.12.0 
    gatsby-plugin-manifest: ^5.12.0 => 5.12.0 
    gatsby-plugin-mini-css-class-name: ^6.0.0 => 6.0.0 
    gatsby-plugin-netlify: ^5.1.0 => 5.1.1 
    gatsby-plugin-react-helmet: ^6.12.0 => 6.12.0 
    gatsby-plugin-react-svg: ^3.3.0 => 3.3.0 
    gatsby-plugin-remote-images: ^3.6.6 => 3.6.6 
    gatsby-plugin-robots-txt: ^1.8.0 => 1.8.0 
    gatsby-plugin-root-import: ^2.0.9 => 2.0.9 
    gatsby-plugin-sass: ^6.12.0 => 6.12.0 
    gatsby-plugin-sharp: ^5.12.0 => 5.12.0 
    gatsby-plugin-sitemap: ^6.12.0 => 6.12.0 
    gatsby-plugin-typescript: ^5.12.0 => 5.12.0 
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.31 => 1.1.31 
    gatsby-plugin-zopfli: ^2.0.0 => 2.0.0 
    gatsby-source-filesystem: ^5.12.0 => 5.12.0 
    gatsby-source-sanity: ^7.8.1 => 7.8.1 
    gatsby-source-youtube-v3: ^3.0.2 => 3.0.2 
    gatsby-transformer-remark: ^6.12.0 => 6.12.0 
    gatsby-transformer-sharp: ^5.12.0 => 5.12.0

Config Flags

No response