fix(url): add extra level of URI encode on url to preserve image src …

…query

CHANGELOG.md

@@ -3,6 +3,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Fixed
+
+- Added extra level of URI encode on url to preserve image src query
+
 ## [0.3.3] - 2022-02-13
 
 ### Fixed

src/hooks/responsiveImage/responsiveImage.ts

@@ -23,7 +23,7 @@ export const useResponsiveImage = (
 
   for (const { size } of responsive) {
     const srcSetUrl = encodeQuery(loaderUrl, {
-      src: image.src,
+      src: encodeURI(image.src || ""),
       width: size.width,
       height: size.height,
       ...options,

src/utils/url.ts

@@ -17,6 +17,7 @@ export const encodeQuery = (url: string, query: Record<string, any>): string =>
     {
       skipNull: true,
       arrayFormat: "bracket",
+      sort: false,
     }
   );
 
@@ -27,6 +28,7 @@ export const decodeTransformQuery = (
     arrayFormat: "bracket",
     parseNumbers: true,
     parseBooleans: true,
+    sort: false,
   });
 
 export const parseURL = (rawUrl: string, baseUrl?: URL | string): URL => {