fix(components-content): add imageLink fixer

src/components/content/ProseImg.vue

@@ -1,30 +1,22 @@
 <script setup lang="ts">
-const props = defineProps({
-  src: {
-    type: String,
-    default: ''
-  },
-  alt: {
-    type: String,
-    default: ''
-  },
-  width: {
-    type: [String, Number],
-    default: undefined
-  },
-  height: {
-    type: [String, Number],
-    default: undefined
-  }
-})
+interface Props {
+  src: string
+  alt: string
+  width?: string | number
+  height?: string | number
+}
+
+const props = defineProps<Props>()
+
+const imageSrc = useImageLink(props.src)
 </script>
 
 <template>
   <v-img
-    :src="props.src"
-    :alt="alt"
+    :src="imageSrc"
+    :alt="props.alt"
     max-height="256"
-    :width="width"
-    :height="height"
+    :width="props.width"
+    :height="props.height"
   />
 </template>

src/components/content/SparkleCharacter.vue

@@ -42,6 +42,8 @@ const props = withDefaults(defineProps<Props>(), {
   descriptionImage: undefined
 })
 
+const cardImageLink = useImageLink(props.cardImage)
+
 const charaStatus = computed(() => {
   return [
     { key: 'HP', value: props.status.hp },
@@ -98,9 +100,14 @@ const jobName = computed(() => {
 })
 const skillInfos = computed(() => {
   return [props.skill1, props.skill2, props.skill3].map((skill) => {
+    const iconImageLink = ((): string => {
+      if (!skill.iconImage)
+        return 'https://placehold.jp/50x50.png?text=NowPrinting'
+      const imageSrc = useImageLink(skill.iconImage)
+      return imageSrc
+    })()
     return {
-      iconImage:
-        skill.iconImage || 'https://placehold.jp/50x50.png?text=NowPrinting',
+      iconImage: iconImageLink,
       title: '■ ' + skill.title,
       description: skill.description
     }
@@ -144,7 +151,7 @@ const bigIconSize = computed(() => {
     </div>
     <v-row class="my-1">
       <v-col cols="5">
-        <v-img :src="props.cardImage" elevation="3" />
+        <v-img :src="cardImageLink" elevation="3" />
       </v-col>
       <v-col cols="7">
         <p class="name-text font-weight-medium" v-text="props.name" />

src/components/content/SparkleSection.vue

@@ -3,17 +3,14 @@ interface Props {
   title: string
 }
 const props = defineProps<Props>()
+
+const imageSrc = useImageLink('/deco-hitode.png')
 </script>
 
 <template>
   <div>
     <div class="mt-8 d-flex align-center">
-      <v-img
-        class="flex-grow-0"
-        src="/deco-hitode.png"
-        width="24"
-        height="24"
-      />
+      <v-img class="flex-grow-0" :src="imageSrc" width="24" height="24" />
       <span class="ml-1 flex-grow-1 text-info" v-text="props.title" />
     </div>
     <v-divider class="my-1 border-opacity-100" color="info" :thickness="3" />

src/composables/useImageLink.ts

@@ -0,0 +1,8 @@
+export const useImageLink = (relativeImagePath: string) => {
+  const { app } = useRuntimeConfig()
+  const imageSrc = (app.baseURL + relativeImagePath).replace(
+    /([^:]\/)\/+/g,
+    '$1'
+  )
+  return imageSrc
+}