图片加载

图片展示统一加载中，加载错误等显示

基础用法

可通过 fit 来设置图片在容器的样式，同原生 object-fit。

fill

contain

cover

none

scale-down

显示loadSrc和errorSrc

<template>
  <div class="over-flow">
    <div v-for="fit in fitList" :key="fit" class="fl mr-lg">
      <ui-image width="100px" height="100px" :src="demo1" :fit="fit" />
      <p class="t-center">{{ fit }}</p>
    </div>
    <div class="fl mr-lg">
      <ui-image
        width="100px"
        height="100px"
        src="https://file.iviewui.com/images/image-demo-30.jpg"
        error-src="https://file.iviewui.com/images/image-demo-2.jpg"
        load-src="https://file.iviewui.com/images/image-demo-3.jpg"
      />
      <p class="t-center">显示loadSrc和errorSrc</p>
    </div>
  </div>
</template>

<script setup>
  import demo1 from '/images/image/demo1.jpg';

  const fitList = ['fill', 'contain', 'cover', 'none', 'scale-down'];
</script>

隐藏源代码

预览

设置属性 preview 可以开启图片预览模式，默认已开启，通过属性 preview-list 来设置图片列表。

预览时，可以使用 ←、→ 切换图片，↑、↓ 缩放图片，Space 显示 1:1 图片，ESC 退出预览。

<template>
  <div>
    <ui-image
      class="mr-lg"
      v-for="url in urlList"
      width="100px"
      height="100px"
      :src="url"
      :key="url"
      :url-list="urlList"
    />
  </div>
</template>

<script setup>
  import demo1 from '/images/image/demo1.jpg';
  import demo2 from '/images/image/demo2.jpg';
  import demo3 from '/images/image/demo3.jpg';

  const urlList = [demo1, demo2, demo3];
</script>

隐藏源代码

属性

属性名	说明	类型	可选值	默认值
src	图片地址	string	——	——
fit	图片适配容器模式包含：fill，contain，cover，none，scale-down	string	——	contain
preview	是否图片预览	boolean	——	true
url-list	图片预览列表	array	——	[]
error-src	加载错误时，最终显示的图片地址	string	——	——
load-src	加载中显示的图片地址	string	——	——
透传属性	见 View Design Image	——	——	——