fix svg rendering

ramp4-pcar4 · Dec 6, 2024 · 823c49c · 823c49c
1 parent 20a17a9
commit 823c49c
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 10 deletions.
diff --git a/src/components/panels/image-panel.vue b/src/components/panels/image-panel.vue
@@ -75,11 +75,20 @@ onMounted((): void => {
         const image = props.config;
         const assetSrc = `${image.src.substring(image.src.indexOf('/') + 1)}`;
         const imageFile = props.configFileStructure?.zip.file(assetSrc);
+        const imageType = assetSrc.split('.').at(-1);
+        const imageName = image.src.replace(/^.*[\\/]/, '');
         if (imageFile) {
             // Convert the image to a blob so it can be displayed locally.
-            imageFile.async('blob').then((res: Blob) => {
-                state.src = props.config.src = URL.createObjectURL(res);
-            });
+            if (imageType !== 'svg') {
+                imageFile.async('blob').then((res: Blob) => {
+                    state.src = props.config.src = URL.createObjectURL(res);
+                });
+            } else {
+                imageFile.async('text').then((res) => {
+                    const image = new File([res], imageName, { type: 'image/svg+xml' });
+                    state.src = props.config.src = URL.createObjectURL(image);
+                });
+            }
         }
     }
 

diff --git a/src/components/story/introduction.vue b/src/components/story/introduction.vue
@@ -103,7 +103,6 @@ const state = reactive({
 onMounted(() => {
     state.logo = props.config.logo ? props.config.logo.src : '';
     state.backgroundImage = props.config.backgroundImage ?? '';
-
     // obtain logo and background image from ZIP file if it exists
     if (props.configFileStructure) {
         const logo = props.config.logo?.src;
@@ -112,20 +111,38 @@ onMounted(() => {
         if (logo) {
             const logoSrc = `${logo.substring(logo.indexOf('/') + 1)}`;
             const logoFile = props.configFileStructure.zip.file(logoSrc);
+            const logoType = logoSrc.split('.').at(-1);
+            const logoName = logo.replace(/^.*[\\/]/, '');
             if (logoFile) {
-                logoFile.async('blob').then((res: Blob) => {
-                    state.logo = props.config.logo.src = URL.createObjectURL(res);
-                });
+                if (logoType !== 'svg') {
+                    logoFile.async('blob').then((res: Blob) => {
+                        state.logo = props.config.logo.src = URL.createObjectURL(res);
+                    });
+                } else {
+                    logoFile.async('text').then((res) => {
+                        const image = new File([res], logoName, { type: 'image/svg+xml' });
+                        state.logo = props.config.logo.src = URL.createObjectURL(image);
+                    });
+                }
             }
         }
 
         if (background) {
             const bgSrc = `${background.substring(background.indexOf('/') + 1)}`;
             const bgFile = props.configFileStructure.zip.file(bgSrc);
+            const bgType = bgSrc.split('.').at(-1);
+            const bgName = logo.replace(/^.*[\\/]/, '');
             if (bgFile) {
-                bgFile.async('blob').then((res: Blob) => {
-                    state.backgroundImage = props.config.backgroundImage = URL.createObjectURL(res);
-                });
+                if (bgType !== 'svg') {
+                    bgFile.async('blob').then((res: Blob) => {
+                        state.backgroundImage = props.config.backgroundImage = URL.createObjectURL(res);
+                    });
+                } else {
+                    bgFile.async('blob').then((res: Blob) => {
+                        const image = new File([res], bgName, { type: 'image/svg+xml' });
+                        state.backgroundImage = props.config.backgroundImage = URL.createObjectURL(image);
+                    });
+                }
             }
         }
     }