refactor: remove assetBaseUrl from image loaders (#4569)

Asset base url is now automatically added by builder or component generator and passed to loader as is. Saas loader removes /cgi/asset when detected. All other loaders just use full relative path without changes which simplifies them a lot.
webstudio-is · Dec 12, 2024 · a82ee06 · a82ee06
1 parent 78d98a5
commit a82ee06
Show file tree

Hide file tree

Showing 16 changed files with 51 additions and 52 deletions.
diff --git a/fixtures/ssg-netlify-by-project-id/app/constants.mjs b/fixtures/ssg-netlify-by-project-id/app/constants.mjs
@@ -16,17 +16,17 @@ export const imageLoader = (props) => {
   }
 
   if (process.env.NODE_ENV !== "production") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   if (props.format === "raw") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   // https://docs.netlify.com/image-cdn/overview/
   return (
     "/.netlify/images?url=" +
-    encodeURIComponent(assetBaseUrl + props.src) +
+    encodeURIComponent(props.src) +
     "&w=" +
     props.width +
     "&q=" +

diff --git a/fixtures/ssg/app/constants.mjs b/fixtures/ssg/app/constants.mjs
@@ -2,7 +2,6 @@
  * We use mjs extension as constants in this file is shared with the build script
  * and we use `node --eval` to extract the constants.
  */
-import { UrlCanParse } from "@webstudio-is/image";
 
 export const assetBaseUrl = "/assets/";
 export const imageBaseUrl = "/assets/";
@@ -11,9 +10,5 @@ export const imageBaseUrl = "/assets/";
  * @type {import("@webstudio-is/image").ImageLoader}
  */
 export const imageLoader = ({ src }) => {
-  if (UrlCanParse(src)) {
-    return src;
-  }
-
-  return assetBaseUrl + src;
+  return src;
 };
diff --git a/fixtures/webstudio-cloudflare-template/app/constants.mjs b/fixtures/webstudio-cloudflare-template/app/constants.mjs
@@ -9,5 +9,5 @@ export const imageBaseUrl = "/assets/";
  * @type {import("@webstudio-is/image").ImageLoader}
  */
 export const imageLoader = ({ src }) => {
-  return assetBaseUrl + src;
+  return src;
 };
diff --git a/fixtures/webstudio-remix-netlify-edge-functions/app/constants.mjs b/fixtures/webstudio-remix-netlify-edge-functions/app/constants.mjs
@@ -10,17 +10,17 @@ export const imageBaseUrl = "/assets/";
  */
 export const imageLoader = (props) => {
   if (process.env.NODE_ENV !== "production") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   if (props.format === "raw") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   // https://docs.netlify.com/image-cdn/overview/
   return (
     "/.netlify/images?url=" +
-    encodeURIComponent(assetBaseUrl + props.src) +
+    encodeURIComponent(props.src) +
     "&w=" +
     props.width +
     "&q=" +

diff --git a/fixtures/webstudio-remix-netlify-functions/app/constants.mjs b/fixtures/webstudio-remix-netlify-functions/app/constants.mjs
@@ -10,17 +10,17 @@ export const imageBaseUrl = "/assets/";
  */
 export const imageLoader = (props) => {
   if (process.env.NODE_ENV !== "production") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   if (props.format === "raw") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   // https://docs.netlify.com/image-cdn/overview/
   return (
     "/.netlify/images?url=" +
-    encodeURIComponent(assetBaseUrl + props.src) +
+    encodeURIComponent(props.src) +
     "&w=" +
     props.width +
     "&q=" +

diff --git a/fixtures/webstudio-remix-vercel/app/constants.mjs b/fixtures/webstudio-remix-vercel/app/constants.mjs
@@ -10,17 +10,17 @@ export const imageBaseUrl = "/assets/";
  */
 export const imageLoader = (props) => {
   if (process.env.NODE_ENV !== "production") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   if (props.format === "raw") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
   return (
     "/_vercel/image?url=" +
-    encodeURIComponent(assetBaseUrl + props.src) +
+    encodeURIComponent(props.src) +
     "&w=" +
     props.width +
     "&q=" +

diff --git a/packages/cli/templates/defaults/app/constants.mjs b/packages/cli/templates/defaults/app/constants.mjs
@@ -9,5 +9,5 @@ export const imageBaseUrl = "/assets/";
  * @type {import("@webstudio-is/image").ImageLoader}
  */
 export const imageLoader = ({ src }) => {
-  return assetBaseUrl + src;
+  return src;
 };
diff --git a/packages/cli/templates/netlify-edge-functions/app/constants.mjs b/packages/cli/templates/netlify-edge-functions/app/constants.mjs
@@ -10,17 +10,17 @@ export const imageBaseUrl = "/assets/";
  */
 export const imageLoader = (props) => {
   if (process.env.NODE_ENV !== "production") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   if (props.format === "raw") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   // https://docs.netlify.com/image-cdn/overview/
   return (
     "/.netlify/images?url=" +
-    encodeURIComponent(assetBaseUrl + props.src) +
+    encodeURIComponent(props.src) +
     "&w=" +
     props.width +
     "&q=" +

diff --git a/packages/cli/templates/netlify-functions/app/constants.mjs b/packages/cli/templates/netlify-functions/app/constants.mjs
@@ -10,17 +10,17 @@ export const imageBaseUrl = "/assets/";
  */
 export const imageLoader = (props) => {
   if (process.env.NODE_ENV !== "production") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   if (props.format === "raw") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   // https://docs.netlify.com/image-cdn/overview/
   return (
     "/.netlify/images?url=" +
-    encodeURIComponent(assetBaseUrl + props.src) +
+    encodeURIComponent(props.src) +
     "&w=" +
     props.width +
     "&q=" +

diff --git a/packages/cli/templates/ssg-netlify/app/constants.mjs b/packages/cli/templates/ssg-netlify/app/constants.mjs
@@ -16,17 +16,17 @@ export const imageLoader = (props) => {
   }
 
   if (process.env.NODE_ENV !== "production") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   if (props.format === "raw") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   // https://docs.netlify.com/image-cdn/overview/
   return (
     "/.netlify/images?url=" +
-    encodeURIComponent(assetBaseUrl + props.src) +
+    encodeURIComponent(props.src) +
     "&w=" +
     props.width +
     "&q=" +

diff --git a/packages/cli/templates/ssg-vercel/app/constants.mjs b/packages/cli/templates/ssg-vercel/app/constants.mjs
@@ -16,17 +16,17 @@ export const imageLoader = (props) => {
   }
 
   if (process.env.NODE_ENV !== "production") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   if (props.format === "raw") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
   return (
     "/_vercel/image?url=" +
-    encodeURIComponent(assetBaseUrl + props.src) +
+    encodeURIComponent(props.src) +
     "&w=" +
     props.width +
     "&q=" +

diff --git a/packages/cli/templates/ssg/app/constants.mjs b/packages/cli/templates/ssg/app/constants.mjs
@@ -2,7 +2,6 @@
  * We use mjs extension as constants in this file is shared with the build script
  * and we use `node --eval` to extract the constants.
  */
-import { UrlCanParse } from "@webstudio-is/image";
 
 export const assetBaseUrl = "/assets/";
 export const imageBaseUrl = "/assets/";
@@ -11,9 +10,5 @@ export const imageBaseUrl = "/assets/";
  * @type {import("@webstudio-is/image").ImageLoader}
  */
 export const imageLoader = ({ src }) => {
-  if (UrlCanParse(src)) {
-    return src;
-  }
-
-  return assetBaseUrl + src;
+  return src;
 };
diff --git a/packages/cli/templates/vercel/app/constants.mjs b/packages/cli/templates/vercel/app/constants.mjs
@@ -10,17 +10,17 @@ export const imageBaseUrl = "/assets/";
  */
 export const imageLoader = (props) => {
   if (process.env.NODE_ENV !== "production") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   if (props.format === "raw") {
-    return assetBaseUrl + props.src;
+    return props.src;
   }
 
   // https://vercel.com/blog/build-your-own-web-framework#automatic-image-optimization
   return (
     "/_vercel/image?url=" +
-    encodeURIComponent(assetBaseUrl + props.src) +
+    encodeURIComponent(props.src) +
     "&w=" +
     props.width +
     "&q=" +

diff --git a/packages/image/src/image-loader.test.ts b/packages/image/src/image-loader.test.ts
@@ -30,6 +30,16 @@ describe("Asset image transforms", () => {
       decodePathFragment(resultUrl.pathname.slice(imageBaseUrl.length))
     ).toBe(assetName);
   });
+
+  test("strip /cgi/asset from src", () => {
+    expect(
+      wsImageLoader({
+        width: 128,
+        src: "/cgi/asset/my-image.webp",
+        quality: 100,
+      })
+    ).toEqual("/cgi/image/my-image.webp?width=128&quality=100&format=auto");
+  });
 });
 
 describe("Remote src image transforms", () => {

diff --git a/packages/image/src/image-loaders.ts b/packages/image/src/image-loaders.ts
@@ -21,7 +21,6 @@ const encodePathFragment = (fragment: string) => {
 export const wsImageLoader: ImageLoader = (props) => {
   const width = props.format === "raw" ? 16 : props.width;
   const quality = props.format === "raw" ? 100 : props.quality;
-  const { format, src } = props;
 
   if (process.env.NODE_ENV !== "production") {
     warnOnce(
@@ -30,9 +29,15 @@ export const wsImageLoader: ImageLoader = (props) => {
     );
   }
 
+  // support both "/cgi/asset/name" and "name" as inputs
+  let src = props.src;
+  if (src.startsWith("/cgi/asset")) {
+    src = src.slice("/cgi/asset".length);
+  }
+
   const resultUrl = new URL("/cgi/image/", NON_EXISTING_DOMAIN);
 
-  if (format !== "raw") {
+  if (props.format !== "raw") {
     resultUrl.searchParams.set("width", width.toString());
     resultUrl.searchParams.set("quality", quality.toString());
 
@@ -44,7 +49,7 @@ export const wsImageLoader: ImageLoader = (props) => {
       resultUrl.searchParams.set("fit", props.fit);
     }
   }
-  resultUrl.searchParams.set("format", format ?? "auto");
+  resultUrl.searchParams.set("format", props.format ?? "auto");
 
   resultUrl.pathname = joinPath(resultUrl.pathname, encodePathFragment(src));
 

diff --git a/packages/sdk-components-react/src/image.tsx b/packages/sdk-components-react/src/image.tsx
@@ -31,7 +31,7 @@ export const Image = forwardRef<
     // cast to string when invalid value type is provided with binding
     const src = String(props.src ?? "");
 
-    const { imageLoader, renderer, assetBaseUrl } = useContext(ReactSdkContext);
+    const { imageLoader, renderer } = useContext(ReactSdkContext);
 
     let decoding = decodingProp;
 
@@ -60,12 +60,6 @@ export const Image = forwardRef<
       }
     }
 
-    let assetName = src;
-
-    if (src.startsWith(assetBaseUrl)) {
-      assetName = src.slice(assetBaseUrl.length);
-    }
-
     return (
       <WebstudioImage
         /**
@@ -83,7 +77,7 @@ export const Image = forwardRef<
         height={height}
         {...props}
         loader={imageLoader}
-        src={assetName}
+        src={src}
         ref={ref}
       />
     );