Image 图片

示例

基础用法

<script lang="ts">
  let src = '/images/sun-parakeet.jpg'
</script>

<Image {src} />

可点击

<Image {src} onClick={() => showToast({ text: 'Hi' })} />

多种填充模式

<Image {src} class="img object-fill" />
<Image {src} class="img object-contain" />
<Image {src} class="img object-cover" />
<Image {src} class="img object-scale-down" />
<Image {src} class="img object-none" />

<style lang="postcss">
  :global(.img) {
    border: 1px dashed gray;
    width: 100px;
    height: 100px;
  }
</style>

加载失败

<Image
  src="/404"
  style="width: 100px; height: 100px"
  onerror={() => console.log('图片加载失败')}
/>

懒加载

<Image {src} loading="lazy" />

Image

属性

事件

事件	说明	类型
onClick	容器点击事件	(e: MouseEvent) => void
onclick	`` 标签的点击事件	(e: MouseEvent) => void

注意：请使用 onClick，因为 <img> 标签在图片加载失败时会被销毁