From 99363c9abe211025abd614a1d1f5ef0d107964c1 Mon Sep 17 00:00:00 2001 From: Tom Butcher Date: Sat, 3 Jan 2026 01:06:52 +0000 Subject: [PATCH] Remove query params from search --- src/components/Image.jsx | 25 +++++++++++++++++++++---- 1 file changed, 21 insertions(+), 4 deletions(-) diff --git a/src/components/Image.jsx b/src/components/Image.jsx index f3bb6e1..92a702b 100644 --- a/src/components/Image.jsx +++ b/src/components/Image.jsx @@ -2,6 +2,20 @@ import React, { useState, useEffect, useRef } from "react"; import { decode } from "blurhash"; import { useImageContext } from "../contexts/ImageContext"; +// Helper function to remove query parameters from a URL +const removeQueryParams = (url) => { + if (!url) return url; + try { + const urlObj = new URL(url); + urlObj.search = ""; + return urlObj.toString(); + } catch { + // If it's not a valid URL, just remove query params manually + const index = url.indexOf("?"); + return index !== -1 ? url.substring(0, index) : url; + } +}; + const Image = ({ src, alt, className, loading = "lazy", ...props }) => { const { imageObjects } = useImageContext(); @@ -13,11 +27,14 @@ const Image = ({ src, alt, className, loading = "lazy", ...props }) => { // Find the image object that matches the src useEffect(() => { if (src) { - const imageObj = imageObjects.find((img) => img.src === src); + const normalizedSrc = removeQueryParams(src); + const imageObj = imageObjects.find( + (img) => removeQueryParams(img.src) === normalizedSrc + ); setCurrentImageObj(imageObj || null); // Reset processed state when src changes - if (processedSrcRef.current !== src) { - processedSrcRef.current = src; + if (processedSrcRef.current !== normalizedSrc) { + processedSrcRef.current = normalizedSrc; setImageLoaded(false); } } else { @@ -32,7 +49,7 @@ const Image = ({ src, alt, className, loading = "lazy", ...props }) => { if ( currentImageObj?.blurHash && !blurhashCanvas && - processedSrcRef.current === src + processedSrcRef.current === removeQueryParams(src) ) { try { const pixels = decode(currentImageObj.blurHash, 32, 32);