Merge branch 'master' of github.com:9th-js/wcui

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')