fix: remote URLs with query are skipped

Fixes #22
saneef · Oct 22, 2023 · 4e231e5 · 4e231e5
1 parent 7b1a342
commit 4e231e5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 14 deletions.
diff --git a/lib/img2picture.js b/lib/img2picture.js
@@ -217,31 +217,30 @@ async function generateImage(attrs, options) {
 async function replaceImages(content, options) {
   const { extensions, fetchRemote } = options;
   const $ = cheerio.load(content);
-  let images = $("img")
+  const images = $("img")
     .not("picture img") // Ignore images wrapped in <picture>
     .not("[data-img2picture-ignore]") // Ignore excluded images
     .filter((i, el) => {
       const src = $(el).attr("src");
       if (src && extensions) {
+        // Exclude remote URLs when fetchRemote=false
+        const pathFromUrl = getPathFromUrl(src);
+        if (pathFromUrl) {
+          // Is remote URL
+          if (fetchRemote) {
+            return isAllowedExtension(pathFromUrl, extensions);
+          }
+
+          return false;
+        }
+
+        // Exclude paths with extensions other than provided
         return isAllowedExtension(src, extensions);
       }
 
       return false;
     });
 
-  // Ignore remote images if fetchRemote is false
-  if (!fetchRemote) {
-    images = images.filter((i, el) => {
-      const src = $(el).attr("src");
-
-      if (src) {
-        return !isRemoteUrl(src);
-      }
-
-      return false;
-    });
-  }
-
   const promises = [];
   for (let i = 0; i < images.length; i++) {
     const img = images[i];

diff --git a/tests/remote.js b/tests/remote.js
@@ -47,3 +47,18 @@ test("Fetch a remote image, generates AVIF, WebP, JPEG formats, and puts them in
   t.is(smallestWebPWidth, 150);
   t.is(largestWebPWidth, 1350);
 });
+
+test("Fetch a remote image with query params in URL", async (t) => {
+  const input =
+    '<img src="https://raw.githubusercontent.com/saneef/eleventy-plugin-img2picture/main/tests/fixtures/images/shapes.png?v=12345" alt="Shapes">';
+  const outputPath = "file.html";
+  const output =
+    '<html><head></head><body><picture><source type="image/avif" srcset="/images/shapes-150w.avif 150w, /images/shapes-300w.avif 300w, /images/shapes-450w.avif 450w, /images/shapes-600w.avif 600w, /images/shapes-750w.avif 750w, /images/shapes-900w.avif 900w, /images/shapes-1050w.avif 1050w, /images/shapes-1200w.avif 1200w, /images/shapes-1350w.avif 1350w" sizes="100vw"><source type="image/webp" srcset="/images/shapes-150w.webp 150w, /images/shapes-300w.webp 300w, /images/shapes-450w.webp 450w, /images/shapes-600w.webp 600w, /images/shapes-750w.webp 750w, /images/shapes-900w.webp 900w, /images/shapes-1050w.webp 1050w, /images/shapes-1200w.webp 1200w, /images/shapes-1350w.webp 1350w" sizes="100vw"><source type="image/jpeg" srcset="/images/shapes-150w.jpeg 150w, /images/shapes-300w.jpeg 300w, /images/shapes-450w.jpeg 450w, /images/shapes-600w.jpeg 600w, /images/shapes-750w.jpeg 750w, /images/shapes-900w.jpeg 900w, /images/shapes-1050w.jpeg 1050w, /images/shapes-1200w.jpeg 1200w, /images/shapes-1350w.jpeg 1350w" sizes="100vw"><img src="/images/shapes-750w.jpeg" width="1350" height="1350" alt="Shapes" loading="lazy" decoding="async"></picture></body></html>';
+
+  const transformer = img2picture({
+    ...baseOptions,
+    fetchRemote: true,
+  });
+  const result = await transformer(input, outputPath);
+  t.is(result, output);
+});