Image 图片

使用指南

提供多种图片填充模式，支持图片加载提示、加载失败提示。

代码演示

查看代码

<template>
  <div class="list">
    <p>容器</p>
    <h3-image
      width="100px"
      height="100px"
      :src="imgEg1"
    />
    <h3-image
      width="100px"
      height="100px"
      :src="imgEg1"
      :radius="12"
    />
    <h3-image
      width="100px"
      height="100px"
      :src="imgEg1"
      radius="100%"
    />

    <p>填充模式</p>
    <div class="image-wrap">
      <div class="image-item">
        <div>contain</div>
        <h3-image
          width="100px"
          height="100px"
          :src="imgEg1"
          radius="0"
          fit="contain"
        />
      </div>
      <div class="image-item">
        <div>cover</div>
        <h3-image
          width="100px"
          height="100px"
          :src="imgEg1"
          radius="0"
          fit="cover"
        />
      </div>
      <div class="image-item">
        <div>fill</div>
        <h3-image
          width="100px"
          height="100px"
          :src="imgEg1"
          radius="0"
          fit="fill"
        />
      </div>
      <div class="image-item">
        <div>none</div>
        <h3-image
          width="100px"
          height="100px"
          :src="imgEg1"
          radius="0"
          fit="none"
        />
      </div>
      <div class="image-item">
        <div>scale-down</div>
        <h3-image
          width="100px"
          height="100px"
          :src="imgEg1"
          radius="0"
          fit="scale-down"
        />
      </div>

    </div>
    <p>加载失败提示</p>
    
     <h3-image
       :width="100"
       :height="100"
       src="../assets"
     />
     <h3-image
       :width="80"
       :height="80"
       src="../assets"
     />
     <h3-image
       :width="56"
       :height="56"
       src="../assets"
     />
     <h3-image
       :width="40"
       :height="40"
       src="../assets"
     />
     <p>自定义加载失败提示</p>
      <h3-image
       :width="100"
       :height="100"
       src="../assets"
     >
       <template #error>
         加载失败了
       </template>
    </h3-image>

     
  </div>
</template>
<script>
import H3Image from '@/components/h3-image';

export default {
  components: {
    H3Image,
  },
  data () {
    return {
      avatar:
        'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20191031/0884b1f480ee47058c82c2a3cf6f84f6.jpeg',
      imgEg1: require('../assets/image/dialog.jpg'),
      
    };
  },
};
</script>

<style lang="less" scoped>
.list {
  background-color: #fff;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px 15px ;
  }
  .image-wrap {
    display: flex;
    flex-wrap: wrap;
    .image-item {
      text-align: center;
      margin: 10px
    }
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

新增组件

API

Prop

参数	说明	类型	默认值
src	图片链接	string	-
fit	图片填充模式	string	cover
alt	替代文本	string	-
width	宽度，默认单位为 px	string | number	-
height	高度，默认单位为 px	string | number	-
size	大小，默认单位为 px	string | number	40
radius	圆角大小，默认单位为 px	string | number	0
show-error	是否展示图片加载失败提示	boolean	true
show-loading	是否展示图片加载中提示	boolean	true
error-icon	失败时提示的图标名称	boolean	IconPictureLoadingFailedStoke
loading-icon	加载时提示的图标名称	boolean	IconPictureStroke

图片填充模式

名称	含义
contain	保持宽高缩放图片，使图片的长边能完全显示出来
cover	保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边
none	保持图片原有尺寸
scale-down	保取 none 或 contain 中较小的一个
fill	拉伸图片，使图片填满元素

Event

事件名	说明	参数
click	点击图片时触发	-
load	图片加载完毕时触发	-
error	图片加载失败时触发	-

Slots

参数	说明
loading	自定义加载中的提示内容
error	自定义加载失败时的提示内容