fix: image loading error (#97)

Author: pearmini

pnpm-lock.yaml

@@ -1,7 +1,14 @@
 import options from "./index.json";
+import IMAGE from "../../../../assets/images/4.jpg";
 
 export const bigWorld = {
   name: "Big World",
   type: "image",
-  options
+  options: {
+    ...options,
+    background: {
+      ...options.background,
+      imageURL: IMAGE,
+    },
+  },
 };

src/assets/images/1.jpeg

@@ -10,5 +10,5 @@
     "padding": 0,
     "dy": 30
   },
-  "background": { "mode": "image", "imageURL": "http://pearmini.gitee.io/assets/colorfu/4.jpg" }
+  "background": { "mode": "image" }
 }

src/assets/images/2.jpg

@@ -1,7 +1,15 @@
 import options from "./index.json";
+import IMAGE from "../../../../assets/images/5.jpeg";
 
 export const challenge = {
   name: "Face challenge",
   type: "image",
-  options
+  options: {
+    ...options,
+    background: {
+      ...options.background,
+      imageURL: IMAGE,
+    },
+  },
 };
+

src/assets/images/3.jpg

@@ -10,5 +10,5 @@
     "padding": 0,
     "dy": 30
   },
-  "background": { "mode": "image", "imageURL": "http://pearmini.gitee.io/assets/colorfu/5.jpeg" }
+  "background": { "mode": "image" }
 }

src/assets/images/4.jpg

@@ -1,7 +1,14 @@
 import options from "./index.json";
+import IMAGE from "../../../../assets/images/1.jpeg";  
 
 export const falling = {
   name: "Falling Down",
   type: "image",
-  options
+  options: {
+    ...options,
+    background: {
+      ...options.background,
+      imageURL: IMAGE,
+    },
+  },
 };

src/assets/images/5.jpeg

@@ -10,5 +10,5 @@
     "padding": 0,
     "dy": 30
   },
-  "background": { "mode": "image", "imageURL": "http://pearmini.gitee.io/assets/colorfu/1.jpeg" }
+  "background": { "mode": "image" }
 }

src/assets/images/background-preivew.png

@@ -1,7 +1,14 @@
 import options from "./index.json";
+import IMAGE from "../../../../assets/images/2.jpg";
 
 export const goodNight = {
   name: "Another Planet",
   type: "image",
-  options
+  options: {
+    ...options,
+    background: {
+      ...options.background,
+      imageURL: IMAGE,
+    },
+  },
 };

src/assets/images/color-palette.gif

@@ -10,5 +10,5 @@
     "padding": 0,
     "dy": 30
   },
-  "background": { "mode": "image", "imageURL": "http://pearmini.gitee.io/assets/colorfu/2.jpg" }
+  "background": { "mode": "image"}
 }

src/assets/images/fu.png

@@ -1,7 +1,14 @@
 import options from "./index.json";
+import IMAGE from "../../../../assets/images/3.jpg";
 
 export const mountain = {
   name: "Eat Red Sun",
   type: "image",
-  options
+  options: {
+    ...options,
+    background: {
+      ...options.background,
+      imageURL: IMAGE,
+    },
+  },
 };

src/assets/images/size-preview.png

@@ -11,7 +11,6 @@
     "dy": 30
   },
   "background": {
-    "mode": "image",
-    "imageURL": "http://pearmini.gitee.io/assets/colorfu/3.jpg"
+    "mode": "image"
   }
 }

src/data/gallery/all/big-world/index.js

@@ -43,7 +43,7 @@
           </el-select>
         </p>
       </div>
-      <img src="http://pearmini.gitee.io/assets/colorfu/fu.png" class="story-image" width="32%" />
+      <img :src="FU_IMAGE" class="story-image" width="32%" />
     </div>
     <div class="story-body">
       <div v-if="selectedValue === 'emoji'">
@@ -140,6 +140,7 @@ import faces from "../data/emoticons.json";
 import { colorStore } from "../data/color";
 import { patterns } from "../data/pattern";
 import { gotoEditor } from "../utils/gotoEditor";
+import FU_IMAGE from "../assets/images/fu.png";
 
 const emojis = Object.values(emojiByGroup).flat();
 
@@ -172,6 +173,7 @@ export default {
       cardSize: 200,
       selectedImageColors: [],
       patternSize: screen.width / 2,
+      FU_IMAGE,
     };
   },
   components: {

src/data/gallery/all/big-world/index.json

@@ -1,6 +1,9 @@
 import { getTextOptions } from "./text";
 import { getBackgroundOptions } from "./background";
 import { getColorOptions } from "./color";
+import COLOR_PALETTE from "../../assets/images/color-palette.gif";
+import SIZE_PREVIEW from "../../assets/images/size-preview.png";
+import BACKGROUND_PREVIEW from "../../assets/images/background-preivew.png";
 
 export function getAttributeOptions(options) {
   return {
@@ -11,7 +14,7 @@ export function getAttributeOptions(options) {
         name: "Colors",
         help: `
         <p style="color: #606266;font-size:14px;line-height: 1.4;">Sets attributes related to color here.</p>
-        <img  src="http://pearmini.gitee.io/assets/colorfu/color-palette.gif" />
+        <img  src=${COLOR_PALETTE} />
         `,
         children: [
           {
@@ -33,7 +36,7 @@ export function getAttributeOptions(options) {
         name: "Words",
         help: `
         <p style="color: #606266;font-size:14px;line-height: 1.4;">Sets attributes related to foreground words here.</p>
-        <img src="http://pearmini.gitee.io/assets/colorfu/size-preview.png" width="100%"/>
+        <img src=${SIZE_PREVIEW} width="100%"/>
         `,
         children: getTextOptions(options),
       },
@@ -42,7 +45,7 @@ export function getAttributeOptions(options) {
         name: "Background",
         help: `
         <p style="color: #606266;font-size:14px;line-height: 1.4;">Sets attributes relate to background here.</p>
-        <img src="http://pearmini.gitee.io/assets/colorfu/background-preivew.png" width="100%"/>
+        <img src=${BACKGROUND_PREVIEW} width="100%"/>
         `,
         children: getBackgroundOptions(options),
       },