Fix Image to preserve extension of images

marshallku · Feb 9, 2024 · a720169 · a720169
1 parent 53e9ee8
commit a720169
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/apps/blog/src/components/Image/index.tsx b/apps/blog/src/components/Image/index.tsx
@@ -1,21 +1,28 @@
 import { type ImgHTMLAttributes } from "react";
 
 interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+    src: string;
     forceSize?: number;
 }
 
 const IMAGE_SIZE = [480, 600, 860, 1180];
 
 function Image({ src, alt, width, height, forceSize, ...rest }: ImageProps) {
+    const extension = src.split(".").pop();
+    const srcWithoutExtension = src.split(".").slice(0, -1).join(".");
+
     return (
         <img
-            src={`${process.env.NEXT_PUBLIC_CDN_URL}${src}${
-                forceSize && process.env.NEXT_PUBLIC_CDN_URL !== "" ? `=w${forceSize}` : ""
-            }`}
+            src={`${process.env.NEXT_PUBLIC_CDN_URL}${srcWithoutExtension}${
+                forceSize && process.env.NEXT_PUBLIC_CDN_URL !== "" ? `.w${forceSize}` : ""
+            }.${extension}`}
             srcSet={
                 width && height && process.env.NEXT_PUBLIC_CDN_URL !== ""
                     ? IMAGE_SIZE.filter((size) => size < Number(width))
-                          .map((size) => `${process.env.NEXT_PUBLIC_CDN_URL}${src}=w${size} ${size}w`)
+                          .map(
+                              (size) =>
+                                  `${process.env.NEXT_PUBLIC_CDN_URL}${srcWithoutExtension}.w${size}.${extension} ${size}w`,
+                          )
                           .join(", ")
                     : undefined
             }