E_WeChat/miniprogram_npm/tdesign-miniprogram/image/image.wxml

<wxs src="../common/utils.wxs" module="_" />

<!-- 加载中占位 -->
<view
  wx:if="{{isLoading}}"
  style="{{_._style([innerStyle, style, customStyle])}}"
  class="{{prefix}}-class {{classPrefix}} {{classPrefix}}__mask {{classPrefix}}--loading {{classPrefix}}--shape-{{shape}}"
  aria-hidden="{{ariaHidden}}"
>
  <t-loading
    wx:if="{{loading === 'default'}}"
    theme="dots"
    size="44rpx"
    loading
    inherit-color
    t-class="t-class-load"
    t-class-text="{{classPrefix}}--loading-text"
  ></t-loading>
  <view wx:elif="{{loading !== ''}}" class="{{classPrefix}}__common {{prefix}}-class-load"> {{loading}} </view>
  <slot name="loading" />
</view>
<!-- 加载失败占位 -->
<view
  wx:elif="{{isFailed}}"
  style="{{_._style([innerStyle, style, customStyle])}}"
  class="{{prefix}}-class {{classPrefix}} {{classPrefix}}__mask {{classPrefix}}--failed {{classPrefix}}--shape-{{shape}}"
  aria-hidden="{{ariaHidden}}"
>
  <view wx:if="{{error === 'default'}}" style="font-size: 44rpx" class="{{prefix}}-class-load">
    <t-icon name="close" aria-role="img" aria-label="加载失败" />
  </view>
  <view wx:elif="{{error}}" class="{{classPrefix}}__common {{prefix}}-class-load"> {{error}} </view>
  <slot name="error" />
</view>
<!-- 图片 -->
<image
  id="image"
  hidden="{{isLoading || isFailed}}"
  class="{{prefix}}-class {{classPrefix}} {{classPrefix}}--shape-{{shape}}"
  src="{{src}}"
  style="{{_._style([innerStyle, style, customStyle])}}"
  mode="{{mode}}"
  webp="{{webp}}"
  lazy-load="{{lazy}}"
  bind:load="onLoaded"
  bind:error="onLoadError"
  show-menu-by-longpress="{{showMenuByLongpress}}"
  aria-hidden="{{ariaHidden || isLoading || isFailed}}"
  aria-label="{{ariaLabel}}"
/>