image icon indicating copy to clipboard operation
image copied to clipboard

Shopify Provider - Broken sources when preexisting URL params

Open francislg2 opened this issue 1 month ago • 0 comments

This line:

https://github.com/nuxt/image/blob/db87207834653462fba0b1f34ce114acf30c07f1/src/runtime/providers/shopify.ts#L39

Does not check if there already are URL params on the source before appending the new ones.


Shopify often has an asset version in the URL,

ex: ...jpg?v=1763534395

which was causing issues with double "?"

ex: ?v=1763534395?width=200


I have made a custom provider as a workaround, but it would be best to fix the original lib file.

export default defineProvider<ShopifyOptions>({
  getImage: (src, { modifiers, baseURL = "" }) => {
    const operations = operationsGenerator(modifiers);

    const [baseUrl, existingQuery] = src.split("?", 2);
    const mergedParams = new URLSearchParams(existingQuery || "");

    if (operations) {
      const operationsParams = new URLSearchParams(operations);
      for (const [key, value] of operationsParams) {
        mergedParams.set(key, value);
      }
    }

    const queryString = mergedParams.toString();

    return {
      url: withBase(
        joinURL(baseUrl + (queryString ? "?" + queryString : "")),
        baseURL
      ),
    };
  },
});

francislg2 avatar Nov 26 '25 19:11 francislg2