feat: implement ImgurFallbackImage component

.env.example

@@ -1 +1,2 @@
 VUE_APP_BASE_URL=https://staging.disfactory.tw/api
+VUE_APP_IMGUR_FALLBACK_URL=https://api.disfactory.tw/imgur

.github/workflows/ci.yml

@@ -66,6 +66,7 @@ jobs:
         run: |
           npm ci
           echo "VUE_APP_BASE_URL=https://staging.disfactory.tw/api" > .env
+          echo "VUE_APP_IMGUR_FALLBACK_URL=https://staging.disfactory.tw/imgur" >> .env
           npm run build
       - name: Deploy to GitHub Pages
         uses: JamesIves/github-pages-deploy-action@3.7.1
@@ -95,6 +96,7 @@ jobs:
         run: |
           npm ci
           echo "VUE_APP_BASE_URL=https://api.disfactory.tw/api" > .env.production
+          echo "VUE_APP_IMGUR_FALLBACK_URL=https://api.disfactory.tw/imgur" >> .env.production
           npm run build
           echo "disfactory.tw" > dist/CNAME
       - name: Deploy to GitHub Pages

src/components/FactoryDetailPage.vue

@@ -56,7 +56,7 @@
             </div>
           </v-slide-item>
           <v-slide-item v-for="(image, index) in images" class="mr-4" :key="image.id" :class="{ 'ml-4': index === 0 }" @click.native="setLightboxIndex(index)">
-            <img :src="image.url" class="factory-slide-image" />
+            <ImgurFallbackImage :src="image.url" className="factory-slide-image" />
           </v-slide-item>
         </v-slide-group>
 
@@ -145,9 +145,13 @@ import { getFactoryReportRecords } from '@/api'
 
 import { useAppState } from '../lib/appState'
 import { FactoryImage, getDisplayStatusText, ReportRecord } from '../types'
+import ImgurFallbackImage from './ImgurFallbackImage.vue'
 
 export default createComponent({
   name: 'FactoryDetailPage',
+  components: {
+    ImgurFallbackImage
+  },
   setup () {
     const [appState, { pageTransition, expandFactoryDetail, collapseFactoryDetail, toggleFactoryDetail }] = useAppState()
 

src/components/ImgurFallbackImage.vue

@@ -0,0 +1,58 @@
+<template>
+  <img :src="imageUrl" :alt="alt" :class="className" @error="onError" />
+</template>
+
+<script lang="ts">
+import { createComponent, computed, ref, onUpdated, watch } from '@vue/composition-api'
+
+const IMGUR_REGEX = /i\.imgur\.com\/([a-zA-Z0-9]+)\.([a-zA-Z0-9]+)(\?.*)?$/
+
+const imgurFallbackBaseUrl = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_IMGUR_FALLBACK_URL : '/server/imgur'
+
+export default createComponent({
+  name: 'ImgurFallbackImage',
+  props: {
+    src: {
+      type: String,
+      required: true
+    },
+    alt: {
+      type: String,
+      default: ''
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  setup (props, context) {
+    const matches = IMGUR_REGEX.exec(props.src)
+
+    const imgurInfo = computed(() => {
+      return matches ? {
+        id: matches[1],
+        ext: matches[2]
+      } : null
+    })
+
+    const fallbackUrl = computed(() => {
+      if (imgurInfo.value) {
+        return `${imgurFallbackBaseUrl}/${imgurInfo.value.id}.${imgurInfo.value.ext}`
+      } else {
+        return props.src
+      }
+    })
+
+    const imageUrl = ref(fallbackUrl.value)
+
+    const onError = () => {
+      imageUrl.value = props.src
+    }
+
+    return {
+      imageUrl,
+      onError
+    }
+  }
+})
+</script>