Instant Search: Fix photon integration (#17037)

Automattic · Sep 1, 2020 · ec88783 · ec88783
1 parent cb462a7
commit ec88783
Showing 1 changed file with 19 additions and 3 deletions.
diff --git a/modules/search/instant-search/components/photon-image.jsx b/modules/search/instant-search/components/photon-image.jsx
@@ -6,13 +6,29 @@
 import { h } from 'preact';
 import photon from 'photon';
 
+/**
+ * Strips query string values from URLs; photon can't handle them.
+ *
+ * @param {string} url - Image URL
+ *
+ * @returns {string} - Image URL without any query strings.
+ */
+function stripQueryString( url ) {
+	return url.split( '?', 1 )[ 0 ];
+}
+
 const PhotonImage = ( { useDiv, src, maxWidth = 300, maxHeight = 300, alt, ...otherProps } ) => {
-	const photonSrc = photon( src, { resize: `${ maxWidth },${ maxHeight }` } );
+	const photonSrc = photon( stripQueryString( src ), { resize: `${ maxWidth },${ maxHeight }` } );
+	const srcToDisplay = photonSrc !== null ? photonSrc : src;
 
 	return useDiv ? (
-		<div style={ { backgroundImage: `url("${ src }")` } } title={ alt } { ...otherProps } />
+		<div
+			style={ { backgroundImage: `url("${ srcToDisplay }")` } }
+			title={ alt }
+			{ ...otherProps }
+		/>
 	) : (
-		<img src={ photonSrc !== null ? photonSrc : src } alt={ alt } { ...otherProps } />
+		<img src={ srcToDisplay } alt={ alt } { ...otherProps } />
 	);
 };