| 1 | import { r as registerInstance, c as createEvent, h, H as Host } from './index-8809c729.js';
|
| 2 | import { c as classnames } from './index-1d8e8acd.js';
|
| 3 |
|
| 4 | const indexCss = "img[src=\"\"]{opacity:0}taro-image-core{display:inline-block;overflow:hidden;position:relative;width:auto;height:auto;font-size:0}.taro-img.taro-img__widthfix{height:100%}.taro-img__mode-scaletofill{width:100%;height:100%}.taro-img__mode-aspectfit{max-width:100%;max-height:100%}.taro-img__mode-aspectfill{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.taro-img__mode-aspectfill--width{min-width:100%;height:100%}.taro-img__mode-aspectfill--height{width:100%;min-height:100%}.taro-img__mode-widthfix{width:100%}.taro-img__mode-heightfix{height:100%}.taro-img__mode-top{width:100%}.taro-img__mode-bottom{position:absolute;bottom:0;width:100%}.taro-img__mode-left{height:100%}.taro-img__mode-right{position:absolute;right:0;height:100%}.taro-img__mode-topright{position:absolute;right:0}.taro-img__mode-bottomleft{position:absolute;bottom:0}.taro-img__mode-bottomright{position:absolute;right:0;bottom:0}";
|
| 5 |
|
| 6 | import('./intersection-observer-8e4c7135.js');
|
| 7 | let Image = class {
|
| 8 | constructor(hostRef) {
|
| 9 | registerInstance(this, hostRef);
|
| 10 | this.onLoad = createEvent(this, "load", 7);
|
| 11 | this.onError = createEvent(this, "error", 7);
|
| 12 | this.mode = 'scaleToFill';
|
| 13 | this.lazyLoad = false;
|
| 14 | this.nativeProps = {};
|
| 15 | this.aspectFillMode = 'width';
|
| 16 | }
|
| 17 | componentDidLoad() {
|
| 18 | if (!this.lazyLoad)
|
| 19 | return;
|
| 20 | const lazyImg = new IntersectionObserver(entries => {
|
| 21 |
|
| 22 | if (entries[entries.length - 1].isIntersecting) {
|
| 23 | lazyImg.unobserve(this.imgRef);
|
| 24 | this.imgRef.src = this.src;
|
| 25 | }
|
| 26 | }, {
|
| 27 | rootMargin: '300px 0px'
|
| 28 | });
|
| 29 | lazyImg.observe(this.imgRef);
|
| 30 | }
|
| 31 | imageOnLoad() {
|
| 32 | const { width, height, naturalWidth, naturalHeight } = this.imgRef;
|
| 33 | this.onLoad.emit({
|
| 34 | width,
|
| 35 | height
|
| 36 | });
|
| 37 | this.aspectFillMode = naturalWidth > naturalHeight ? 'width' : 'height';
|
| 38 | }
|
| 39 | imageOnError() {
|
| 40 | this.onError.emit();
|
| 41 | }
|
| 42 | render() {
|
| 43 | const { src, mode = 'scaleToFill', lazyLoad = false, aspectFillMode = 'width', imageOnLoad, imageOnError, nativeProps } = this;
|
| 44 | const cls = classnames({
|
| 45 | 'taro-img__widthfix': mode === 'widthFix'
|
| 46 | });
|
| 47 | const imgCls = classnames(`taro-img__mode-${mode.toLowerCase().replace(/\s/g, '')}`, {
|
| 48 | [`taro-img__mode-aspectfill--${aspectFillMode}`]: mode === 'aspectFill'
|
| 49 | });
|
| 50 | return (h(Host, { class: cls }, lazyLoad ? (h("img", Object.assign({ ref: img => (this.imgRef = img), class: imgCls, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps))) : (h("img", Object.assign({ ref: img => (this.imgRef = img), class: imgCls, src: src, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps)))));
|
| 51 | }
|
| 52 | };
|
| 53 | Image.style = indexCss;
|
| 54 |
|
| 55 | export { Image as taro_image_core };
|