From bdc2653350775b3431ba50d490919c6b63a54e06 Mon Sep 17 00:00:00 2001
From: chenjiajian <770230504@qq.com>
Date: Tue, 28 Mar 2023 18:18:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0image=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/image/index.js | 96 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 src/image/index.js

diff --git a/src/image/index.js b/src/image/index.js
new file mode 100644
index 0000000..090812c
--- /dev/null
+++ b/src/image/index.js
@@ -0,0 +1,96 @@
+/**
+ * {图片组件}
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2023/03/06 15:17:25
+ */
+
+import { css, html, Component, styleMap } from '@bd/core'
+import '../icon/index.js'
+class Image extends Component {
+  static props = {
+    src: '',
+    fit: 'fill',
+    lazy: false,
+    'referrer-policy': null,
+    alt: {
+      type: String,
+      default: null
+    },
+    previewSrcList: {
+      type: Array,
+      default: [],
+      attribute: false
+    }
+  }
+  status = 'loading'
+  static styles = css`
+    :host {
+      position: relative;
+      display: inline-block;
+    }
+    .wc-image {
+      width: 100%;
+      height: 100%;
+    }
+    img {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+    .error {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      color: #666;
+      justify-content: center;
+      align-items: center;
+    }
+  `
+  onError() {
+    this.status = 'error'
+    this.$refs.wrapper.removeChild(this.$refs.img)
+    this.$requestUpdate()
+  }
+  onload() {
+    this.status = 'loaded'
+    this.$requestUpdate()
+  }
+  render() {
+    let {
+      lazy,
+      src,
+      status,
+      fit,
+      alt,
+      'referrer-policy': referrerPolicy
+    } = this
+    let styles = styleMap({
+      'object-fit': fit
+    })
+    let $slot = ''
+    if (status === 'loading') {
+      $slot = html`<slot name="placeholder"></slot>`
+    } else if (status === 'error') {
+      $slot = html`<slot name="error">
+        <div class="error">FAILED</div>
+      </slot>`
+    }
+    return html`
+      <div class="wc-image" ref="wrapper">
+        <img
+          style=${styles}
+          src=${src}
+          alt=${alt}
+          referrer-policy=${referrerPolicy}
+          :loading=${lazy ? 'lazy' : 'auto'}
+          @load=${this.onload}
+          @error=${this.onError}
+          ref="img"
+        />
+        ${$slot}
+      </div>
+    `
+  }
+}
+
+Image.reg('image')