Enable Cloudflare image transformations

Author: tannerlinsley

docs/cloudflare-workers-migration.md

@@ -99,7 +99,7 @@ The Worker build was checked for `generated/create-manifest.js` and `create-mani
 
 ## Image Transformation Note
 
-Cloudflare image transformations are disabled by default because `/cdn-cgi/image/*` returned 404 on the Worker preview URL before custom-domain image resizing was proven. Set `TANSTACK_IMAGE_TRANSFORMATIONS=true` during build only after Image Resizing works on the routed `tanstack.com` zone.
+Cloudflare image transformations are enabled for `build:cloudflare`. Transformed image URLs are emitted through the configured `SITE_URL` origin because `/cdn-cgi/image/*` works on the routed `tanstack.com` zone but still returns 404 on the `workers.dev` hostname.
 
 ## Markdown Audit Note
 

package.json

@@ -11,7 +11,7 @@
     "dev:frontend": "pnpm run with-env vite dev",
     "dev:cloudflare": "pnpm run with-env -- sh -c 'DISABLE_REDACT=true vite dev'",
     "build": "vite build --logLevel warn",
-    "build:cloudflare": "pnpm run build",
+    "build:cloudflare": "TANSTACK_IMAGE_TRANSFORMATIONS=true pnpm run build",
     "preview": "vite preview",
     "preview:cloudflare": "pnpm run preview",
     "deploy:cloudflare": "SITE_URL=https://tanstack.com VITE_SITE_URL=https://tanstack.com pnpm run build:cloudflare && wrangler deploy --name tanstack-com --var SITE_URL:https://tanstack.com",

src/utils/optimizedImage.ts

@@ -19,9 +19,10 @@ export function getOptimizedImageUrl(
     return src
   }
 
+  const transformOrigin = getTransformOrigin()
   const source = encodeURI(src).replace(/^\//, '')
 
-  return `/cdn-cgi/image/${transformOptions}/${source}`
+  return `${transformOrigin}/cdn-cgi/image/${transformOptions}/${source}`
 }
 
 export function getAbsoluteOptimizedImageUrl(
@@ -54,6 +55,10 @@ function shouldTransformImage(src: string) {
   )
 }
 
+function getTransformOrigin() {
+  return __TANSTACK_SITE_URL__.replace(/\/$/, '')
+}
+
 function createCloudflareTransformOptions(
   options: ImageOptimizationOptions,
 ): string | undefined {