docs: 更新文档

Author: Tyh2001

docs/docs/components/image.md

@@ -175,6 +175,50 @@
 
 :::
 
+## 加载失败
+
+`Fighting Design` 对于图片加载失败做了很多的处理，下面分别介绍一下
+
+`err-src` 可以在 `src` 加载失败的时候，备用进行加载
+
+`alt` 属性可以在图片加载失败的时候，展示信息
+
+你也可以使用 `error` 插槽自定义你的错误信息展示
+
+<f-image
+  width="200px"
+  src="https://tianyuhao.cn/images/auto/3.png2"
+  block
+  err-src="https://tianyuhao.cn/images/auto/2.png"
+/>
+
+<f-image
+  width="200px"
+  src="https://tianyuhao.cn/images/auto/3.png2"
+  block
+  err-src="https://tianyuhao.cn/images/auto/2.png2"
+/>
+
+::: details 显示代码
+
+```html
+<f-image
+  width="200px"
+  src="https://tianyuhao.cn/images/auto/3.png2"
+  block
+  err-src="https://tianyuhao.cn/images/auto/2.png"
+/>
+
+<f-image
+  width="200px"
+  src="https://tianyuhao.cn/images/auto/3.png2"
+  block
+  err-src="https://tianyuhao.cn/images/auto/2.png2"
+/>
+```
+
+:::
+
 ## Attributes
 
 | 参数                | 说明                                                                                                         | 类型     | 可选值                                       | 默认值 |
@@ -222,3 +266,15 @@
     'https://tianyuhao.cn/images/auto/3.png'
   ]
 </script>
+
+<style scoped>
+  .my-error {
+    width: 200px;
+    height: 150px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background: rgb(240, 239, 255);
+    border-radius: 10px;
+  }
+</style>

start/src/App.vue

@@ -1,5 +1,17 @@
 <template>
-  <div style="height: 1000px"></div>
+  <f-image
+    width="200px"
+    src="https://tianyuhao.cn/images/auto/3.png2"
+    block
+    err-src="https://tianyuhao.cn/images/auto/2.png2"
+  >
+    <template #error>
+      <div class="my-error">
+        <f-icon size="40px" icon="f-icon-pic" />
+      </div>
+    </template>
+  </f-image>
+  <!-- <div style="height: 1000px"></div>
   <f-image
     root-margin="100px"
     src="https://tianyuhao.cn/images/auto/1.png2"
@@ -21,43 +33,54 @@
     @error="err"
   >
     <template #error>
-      <h1>加载失败</h1>
+      <div class="my-error">
+        <f-icon size="40px" icon="f-icon-pic" />
+      </div>
     </template>
   </f-image>
-  <span>12</span>
+  <span>12</span> -->
 </template>
 
 <script lang="ts" setup>
-  function err(e) {
-    console.log(e)
-    console.log('加载失败------')
-  }
-  function load(e) {
-    console.log(e)
-    console.log('加载成功------')
-  }
-  const listImg = [
-    // 'https://tianyuhao.cn/images/auto/1.png',
-    // 'https://tianyuhao.cn/images/auto/2.png',
-    // 'https://tianyuhao.cn/images/auto/3.png',
-    'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
-    'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
-    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
-    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
-    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
-    'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
-    // 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
-    // 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
-    // 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
-    // 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
-    // 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
-  ]
+  // function err(e) {
+  //   console.log(e)
+  //   console.log('加载失败------')
+  // }
+  // function load(e) {
+  //   console.log(e)
+  //   console.log('加载成功------')
+  // }
+  // const listImg = [
+  //   // 'https://tianyuhao.cn/images/auto/1.png',
+  //   // 'https://tianyuhao.cn/images/auto/2.png',
+  //   // 'https://tianyuhao.cn/images/auto/3.png',
+  //   'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+  //   'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
+  //   'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+  //   'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+  //   'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+  //   'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg'
+  //   // 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+  //   // 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+  //   // 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+  //   // 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
+  //   // 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
+  // ]
 </script>
 
-<style>
+<style scoped>
   .list {
     width: 300px;
     height: 200px;
     background: skyblue;
   }
+  .my-error {
+    width: 200px;
+    height: 150px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background: rgb(240, 239, 255);
+    border-radius: 10px;
+  }
 </style>