don't use image alias for edit frontend

collective · Nov 28, 2024 · b0fb9a2 · b0fb9a2
1 parent d31a9ed
commit b0fb9a2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/examples/nuxt-blog-starter/composables/imageProps.js b/examples/nuxt-blog-starter/composables/imageProps.js
@@ -2,6 +2,7 @@
 
 export default function imageProps(block, bgStyles=false) {
     const { optimizeImage } = useOptimizeImage()
+    const runtimeConfig = useRuntimeConfig()
 
     // https://demo.plone.org/images/penguin1.jpg/@@images/image-32-cecef57e6c78570023eb042501b45dc2.jpeg
     // https://hydra-api.pretagov.com/images/penguin1.jpg/++api++/@@images/image-1800-31be5b7f53648238b68cae0a3ec45dec.jpeg
@@ -44,7 +45,10 @@ export default function imageProps(block, bgStyles=false) {
         }
     } 
     image_url = image_url.startsWith("/") ? `https://hydra-api.pretagov.com${image_url}`: image_url;
-    image_url = image_url.replace("https://hydra-api.pretagov.com", "/_plone_"); // nuxt image alias
+    if (!runtimeConfig.isedit) {
+        // in edit mode we are SPA so this won't work
+        image_url = image_url.replace("https://hydra-api.pretagov.com", "/_plone_"); // nuxt image alias
+    }
     var srcset = "";
     var sizes = "";
     var width = block?.width;

diff --git a/examples/nuxt-blog-starter/nuxt.config.ts b/examples/nuxt-blog-starter/nuxt.config.ts
@@ -29,11 +29,22 @@ export default defineNuxtConfig({
           }
         }
       },
+      runtimeConfig: {
+        public: {
+          isedit: true
+        }
+      },
+
       // generate: {
       //   fallback: "index.html", // Uses '404.html' instead of the default '200.html'
       // },
     }
   },
+  runtimeConfig: {
+    public: {
+      isedit: false // needed so we don't use image alias when no SSR
+    }
+  },
   css: ['/assets/css/main.css'],
   devtools: { enabled: true },
   // postcss: {