@tarojs/components/dist/cjs/image-3ec94993.js

Taro 组件库

'use strict';

const index = require('./index-ae99cbcc.js');
const index$1 = require('./index-b873e40f.js');

const indexCss = "img[src=\"\"]{opacity:0}taro-image-core{width:320px;height:240px;font-size:0;display:inline-block;position:relative;overflow:hidden}.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%;position:absolute;top:50%;transform:translateY(-50%)}.taro-img__mode-aspectfill{position:absolute;top:50%;left: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{position:absolute;left:50%;transform:translate(-50%)}.taro-img__mode-bottom{position:absolute;bottom:0;left:50%;transform:translate(-50%)}.taro-img__mode-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.taro-img__mode-left{position:absolute;top:50%;transform:translateY(-50%)}.taro-img__mode-right{position:absolute;top:50%;right:0;transform:translateY(-50%)}.taro-img__mode-topright{position:absolute;right:0}.taro-img__mode-bottomleft{position:absolute;bottom:0}.taro-img__mode-bottomright{position:absolute;bottom:0;right:0}";

// CDN脚本URL
const LEGO_CDN_URL = 'http://ossin.jd.com/swm-plus/h5Tag/tag.js';
// 检查CDN脚本是否已加载
const isLegoScriptLoaded = () => {
  return document.querySelector(`script[src="${LEGO_CDN_URL}"]`) !== null;
};
// 插入CDN脚本
const insertLegoScript = () => {
  if (isLegoScriptLoaded())
    return;
  const script = document.createElement('script');
  script.type = 'module';
  script.src = LEGO_CDN_URL;
  document.head.appendChild(script);
};
// 解析lego协议URL
const parseLegoUrl = (src) => {
  if (!src.startsWith('lego://'))
    return null;
  try {
    // 移除 'lego://' 前缀
    const urlWithoutProtocol = src.substring(7);
    // 分割tagId和参数
    const [tagId, params] = urlWithoutProtocol.split('?');
    // 解析参数
    const text = params ? new URLSearchParams(params).get('text') || '' : '';
    return { tagId, text };
  }
  catch (error) {
    console.warn('Failed to parse lego URL:', src, error);
    return null;
  }
};
const Image = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.onLoad = index.createEvent(this, "load", 7);
    this.onError = index.createEvent(this, "error", 7);
    this.src = undefined;
    this.mode = 'scaleToFill';
    this.lazyLoad = false;
    this.nativeProps = {};
    this.lang = undefined;
    this.aspectFillMode = 'width';
    this.didLoad = false;
  }
  componentDidLoad() {
    // 检查是否为lego模式，如果是则确保CDN脚本已加载
    const legoData = parseLegoUrl(this.src);
    if (legoData !== null) {
      insertLegoScript();
    }
    if (!this.lazyLoad)
      return;
    const lazyImg = new IntersectionObserver(entries => {
      // 异步 api 关系
      if (entries[entries.length - 1].isIntersecting) {
        lazyImg.unobserve(this.imgRef);
        this.didLoad = true;
      }
    }, {
      rootMargin: '300px 0px'
    });
    lazyImg.observe(this.imgRef);
  }
  imageOnLoad() {
    const { width, height, naturalWidth, naturalHeight } = this.imgRef;
    this.onLoad.emit({
      width,
      height
    });
    this.aspectFillMode = naturalWidth > naturalHeight ? 'width' : 'height';
  }
  imageOnError(e) {
    this.onError.emit(e);
  }
  render() {
    const { src, lazyLoad = false, aspectFillMode = 'width', imageOnLoad, imageOnError, nativeProps, didLoad, lang } = this;
    // mode="" 按默认值处理
    const mode = this.mode || 'scaleToFill';
    // 检查是否为lego模式
    const legoData = parseLegoUrl(src);
    const isLegoMode = legoData !== null;
    const cls = index$1.classnames({
      'taro-img__widthfix': mode === 'widthFix'
    });
    const imgCls = index$1.classnames(`taro-img__mode-${mode.toLowerCase().replace(/\s/g, '')}`, {
      [`taro-img__mode-aspectfill--${aspectFillMode}`]: mode === 'aspectFill'
    });
    // 如果是lego模式，渲染canvas-tag
    if (isLegoMode && legoData) {
      return (index.h(index.Host, { class: cls }, index.h("canvas-tag", Object.assign({ tagId: legoData.tagId, text: legoData.text, lang: lang }, nativeProps))));
    }
    // 普通图片模式
    return (index.h(index.Host, { class: cls }, src ? (index.h("img", Object.assign({ ref: (img) => (this.imgRef = img), class: imgCls, src: lazyLoad && !didLoad ? undefined : src, onLoad: imageOnLoad.bind(this), onError: imageOnError.bind(this) }, nativeProps))) : ''));
  }
};
Image.style = indexCss;

exports.Image = Image;