From ae31b9ce01b21dec659b99cc37577052dfd9dbf1 Mon Sep 17 00:00:00 2001
From: jahnli <jahnli@163.com>
Date: Tue, 1 Oct 2024 18:28:32 +0800
Subject: [PATCH] feat: add demo

---
 src/image/demos/enUS/custom-error.demo.vue | 50 ++++++++++++++++++++++
 src/image/demos/zhCN/custom-error.demo.vue | 50 ++++++++++++++++++++++
 2 files changed, 100 insertions(+)
 create mode 100644 src/image/demos/enUS/custom-error.demo.vue
 create mode 100644 src/image/demos/zhCN/custom-error.demo.vue

diff --git a/src/image/demos/enUS/custom-error.demo.vue b/src/image/demos/enUS/custom-error.demo.vue
new file mode 100644
index 00000000000..9f079b2abfd
--- /dev/null
+++ b/src/image/demos/enUS/custom-error.demo.vue
@@ -0,0 +1,50 @@
+<markdown>
+  # The custom loading failed. Procedure
+
+  In most cases, can use 'fallback-src' to set the image when it fails.
+  </markdown>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { ImageOutline as ImageOutlineIcon } from '@vicons/ionicons5'
+
+export default defineComponent({
+  components: {
+    ImageOutlineIcon
+  },
+  setup() {
+    const url = ref('blablabla')
+    const refresh = () => {
+      url.value = 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
+    }
+    const reloadError = () => {
+      url.value = 'blablabla'
+    }
+    return {
+      url,
+      refresh,
+      reloadError
+    }
+  }
+})
+</script>
+
+<template>
+  <n-flex vertical inline>
+    <n-flex>
+      <n-button type="error" @click="reloadError">
+        Load Fail
+      </n-button>
+      <n-button type="primary" @click="refresh">
+        Refresh
+      </n-button>
+    </n-flex>
+    <n-image width="100" :src="url">
+      <template #error>
+        <n-icon :size="100" color="lightGrey">
+          <ImageOutlineIcon />
+        </n-icon>
+      </template>
+    </n-image>
+  </n-flex>
+</template>
diff --git a/src/image/demos/zhCN/custom-error.demo.vue b/src/image/demos/zhCN/custom-error.demo.vue
new file mode 100644
index 00000000000..815611a6e5d
--- /dev/null
+++ b/src/image/demos/zhCN/custom-error.demo.vue
@@ -0,0 +1,50 @@
+<markdown>
+  # 自定义加载失败
+
+  多数情况下可以使用 `fallback-src` 设定失败时的图像。
+  </markdown>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import { ImageOutline as ImageOutlineIcon } from '@vicons/ionicons5'
+
+export default defineComponent({
+  components: {
+    ImageOutlineIcon
+  },
+  setup() {
+    const url = ref('人生嘛，失败总是难免的')
+    const refresh = () => {
+      url.value = 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg'
+    }
+    const reloadError = () => {
+      url.value = '人生嘛，失败总是难免的'
+    }
+    return {
+      url,
+      refresh,
+      reloadError
+    }
+  }
+})
+</script>
+
+<template>
+  <n-flex vertical inline>
+    <n-flex>
+      <n-button type="error" @click="reloadError">
+        加载失败
+      </n-button>
+      <n-button type="primary" @click="refresh">
+        刷新
+      </n-button>
+    </n-flex>
+    <n-image width="100" :src="url">
+      <template #error>
+        <n-icon :size="100" color="lightGrey">
+          <ImageOutlineIcon />
+        </n-icon>
+      </template>
+    </n-image>
+  </n-flex>
+</template>