Image

Used to show and preview pictures.

Basic

When you need to view a picture, simply set the src property to get a component with preview picture function.

Show caption

By setting title and description, the title and description of the picture can be displayed inside or at the bottom of the picture, and the display position is controlled by footerPosition.

Extra operations

The component provides a named slot extra for users to customize additional content in the footer.

<template>
  <tu-image
    src="https://cdn.pixabay.com/photo/2020/04/04/03/42/paperwork-5000691_640.png"
    title="Keyboard and Mouse"
    description="Present by Tu View Plus"
    width="260"
    style="margin-right: 67px; vertical-align: top"
    :preview-visible="visible1"
    @preview-visible-change="
      () => {
        visible1 = false;
      }
    "
  >
    <template #extra>
      <div class="actions">
        <span
          class="action"
          @click="
            () => {
              visible1 = true;
            }
          "
        >
          <tu-icon>
            <View />
          </tu-icon>
        </span>
        <span class="action">
          <tu-icon>
            <Download />
          </tu-icon>
        </span>
        <tu-tooltip content="Keyboard and Mouse">
          <span class="action">
            <tu-icon>
              <InfoFilled />
            </tu-icon>
          </span>
        </tu-tooltip>
      </div>
    </template>
  </tu-image>
  <tu-image
    src="https://cdn.pixabay.com/photo/2020/04/04/03/42/paperwork-5000691_640.png"
    title="Keyboard and Mouse"
    description="Present by Tu View Plus"
    width="260"
    footer-position="outer"
    :preview-visible="visible2"
    @preview-visible-change="
      () => {
        visible2 = false;
      }
    "
  >
    <template #extra>
      <div class="actions actions-outer">
        <span
          class="action"
          @click="
            () => {
              visible2 = true;
            }
          "
        >
          <tu-icon>
            <View />
          </tu-icon>
        </span>
        <span class="action">
          <tu-icon>
            <Download />
          </tu-icon>
        </span>
        <tu-tooltip content="Keyboard and Mouse">
          <span class="action">
            <tu-icon>
              <InfoFilled />
            </tu-icon>
          </span>
        </tu-tooltip>
      </div>
    </template>
  </tu-image>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { View, Download, InfoFilled } from '@tu-view-plus/icons-vue';

const visible1 = ref(false);
const visible2 = ref(false);

</script>

<style scoped>
.actions {
  display: flex;
  align-items: center;
}
.action {
  padding: 5px 4px;
  font-size: 14px;
  margin-left: 12px;
  border-radius: 2px;
  line-height: 1;
  cursor: pointer;
}
.action:first-child {
  margin-left: 0;
}

.action:hover {
  background: rgba(0, 0, 0, 0.5);
}
.actions-outer {
  .action {
    &:hover {
      color: #ffffff;
    }
  }
}
</style>

<template>
  <tu-image
    src="https://cdn.pixabay.com/photo/2020/04/04/03/42/paperwork-5000691_640.png"
    title="Keyboard and Mouse"
    description="Present by Tu View Plus"
    width="260"
    style="margin-right: 67px; vertical-align: top"
    :preview-visible="visible1"
    @preview-visible-change="
      () => {
        visible1 = false;
      }
    "
  >
    <template #extra>
      <div class="actions">
        <span
          class="action"
          @click="
            () => {
              visible1 = true;
            }
          "
        >
          <tu-icon>
            <View />
          </tu-icon>
        </span>
        <span class="action">
          <tu-icon>
            <Download />
          </tu-icon>
        </span>
        <tu-tooltip content="Keyboard and Mouse">
          <span class="action">
            <tu-icon>
              <InfoFilled />
            </tu-icon>
          </span>
        </tu-tooltip>
      </div>
    </template>
  </tu-image>
  <tu-image
    src="https://cdn.pixabay.com/photo/2020/04/04/03/42/paperwork-5000691_640.png"
    title="Keyboard and Mouse"
    description="Present by Tu View Plus"
    width="260"
    footer-position="outer"
    :preview-visible="visible2"
    @preview-visible-change="
      () => {
        visible2 = false;
      }
    "
  >
    <template #extra>
      <div class="actions actions-outer">
        <span
          class="action"
          @click="
            () => {
              visible2 = true;
            }
          "
        >
          <tu-icon>
            <View />
          </tu-icon>
        </span>
        <span class="action">
          <tu-icon>
            <Download />
          </tu-icon>
        </span>
        <tu-tooltip content="Keyboard and Mouse">
          <span class="action">
            <tu-icon>
              <InfoFilled />
            </tu-icon>
          </span>
        </tu-tooltip>
      </div>
    </template>
  </tu-image>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { View, Download, InfoFilled } from '@tu-view-plus/icons-vue';

const visible1 = ref(false);
const visible2 = ref(false);

</script>

<style scoped>
.actions {
  display: flex;
  align-items: center;
}
.action {
  padding: 5px 4px;
  font-size: 14px;
  margin-left: 12px;
  border-radius: 2px;
  line-height: 1;
  cursor: pointer;
}
.action:first-child {
  margin-left: 0;
}

.action:hover {
  background: rgba(0, 0, 0, 0.5);
}
.actions-outer {
  .action {
    &:hover {
      color: #ffffff;
    }
  }
}
</style>

Error state

Content displayed when the image fails to load.

Loading

By default, the loading effect is not displayed, and the default loading effect can be displayed by setting showLoader to true. If the default loading effect does not meet the requirements, you can also set the loading style yourself through the named slot loader.

<template>
  <div>
    <tu-button
      type="primary"
      @click="
        () => {
          timestamp = Date.now();
        }
      "
      style="margin-bottom: 20px"
    >
      reload
    </tu-button>
  </div>
  <tu-image
    width="200"
    height="200"
    :src="`https://cdn.pixabay.com/photo/2020/04/04/03/42/paperwork-5000691_640.png?timestamp=${timestamp}`"
    show-loader
  />
  <tu-image
    width="200"
    height="200"
    :src="`https://cdn.pixabay.com/photo/2020/04/04/03/42/paperwork-5000691_640.png?timestamp=${timestamp}`"
    style="margin-left: 67px"
  >
    <template #loader>
      <div class="loader-animate" />
    </template>
  </tu-image>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const timestamp = ref();
</script>
<style scoped>
.loader-animate {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(128, 128, 128, 0.18) 25%,
    rgba(125, 125, 125, 0.1) 37%,
    rgba(128, 128, 128, 0.18) 63%
  );

  background-size: 400% 100%;
  animation: loop-circle 1.5s cubic-bezier(0.34, 0.69, 0.1, 1) infinite;
}
@keyframes loop-circle {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}
</style>

<template>
  <div>
    <tu-button
      type="primary"
      @click="
        () => {
          timestamp = Date.now();
        }
      "
      style="margin-bottom: 20px"
    >
      reload
    </tu-button>
  </div>
  <tu-image
    width="200"
    height="200"
    :src="`https://cdn.pixabay.com/photo/2020/04/04/03/42/paperwork-5000691_640.png?timestamp=${timestamp}`"
    show-loader
  />
  <tu-image
    width="200"
    height="200"
    :src="`https://cdn.pixabay.com/photo/2020/04/04/03/42/paperwork-5000691_640.png?timestamp=${timestamp}`"
    style="margin-left: 67px"
  >
    <template #loader>
      <div class="loader-animate" />
    </template>
  </tu-image>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const timestamp = ref();
</script>
<style scoped>
.loader-animate {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(128, 128, 128, 0.18) 25%,
    rgba(125, 125, 125, 0.1) 37%,
    rgba(128, 128, 128, 0.18) 63%
  );

  background-size: 400% 100%;
  animation: loop-circle 1.5s cubic-bezier(0.34, 0.69, 0.1, 1) infinite;
}
@keyframes loop-circle {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}
</style>

Progressive loading

When you need to display a large image, you can pass a smaller image to loader to display it when the original image is not successfully loaded to simulate progressive loading.

Preview action bar

The function buttons on the control preview control bar can be sorted and filtered through actionLayout.In addition, the preview component preview provides the actions slot to support custom additional action items, and also provides the action item component

Multi-image preview

Use <preview-group> to wrap the <image> component to preview multiple images.

Use preview alone

preview can be used alone, you need to control visible.

Use PreviewGroup alone

<preview-group> can be used alone, you need to control visible by yourself. The image display is divided into two scenes: First, the first image to be displayed can be specified by defaultCurrent. Second, to control which image is currently displayed by current.

You can specify the parent node of the preview mounted by popupContainer.

Image API

Image Attributes

Name	Description	Type	Default
src	Image src	`String`	-
width	Image width	`String` `Number`	-
height	Image height	`String` `Number`	-
title	Title	`String`	-
description	Description, will be displayed at the bottom. if alt has no value, it will be set to alt	`String`	-
fit	Indicate how the image should be resized to fit its container	`String`	-
alt	Text description of the image	`String`	-
hide-footer	Whether to hide footer	`Boolean` `String`	false
footer-position	The position shown at the bottom	`String`	inner
show-loader	Whether to show the loading effect	`Boolean`	false
preview	Whether to enable preview	`Boolean`	true
preview-visible (v-model)	Control the open state of the preview, can be used in conjunction with previewVisibleChange	`Boolean`	-
default-preview-visible	The default open state of the preview	`Boolean`	false
preview-props	Preview configuration items (all options are optional) ImagePreviewProps	`ImagePreviewProps`	-
footer-class	The class name of the bottom display area	`String` `Array` `Object`	-

Image Events

Name	Description	Type
preview-visible-change	Preview opening and closing events	`Function`

Image Slots

Name	Description
error	Customize error content.
error-icon	Customize the icon of error content.
loader	Customize loading effect.
extra	Extra content at the bottom

Preview Attributes

Name	Description	Type	Default
src	Image src	`String`	-
visible (v-model)	Whether is visible	`Boolean`	-
default-visible	Default visibility	`Boolean`	false
mask-closable	Whether to close the modal when mask is clicked	`Boolean`	true
closable	Whether to show close button	`Boolean`	true
actions-layout	Layout of action list	`Array`	[ 'fullScreen', 'rotateRight', 'rotateLeft', 'zoomIn', 'zoomOut', 'originalSize']
popup-container	Set the mount point of the pop-up box, the same as the to of teleport, the default value is document.body	`HTMLElement` `String`	-
esc-to-close	Whether to support the ESC key to close the preview	`Boolean`	true
wheel-zoom	Whether to enable wheel zoom	`Boolean`	true
keyboard	Whether to enable keyboard shortcuts	`Boolean`	true
default-scale	Default scale	`Number`	1
zoom-rate	Zoom rate, only for scroll zoom	`Number`	1.1

Preview Events

Name	Description	Type
close	Close event	-

Preview Slots

Name	Description
actions	Customize additional action items

Preview Group Attributes

Name	Description	Type	Default
src-list	Picture list (after setting this property, the picture information of a-image subcomponent will no longer be collected)	`Array`	-
current (v-model)	The index of the currently displayed image	`Number`	-
default-current	The index of the first image shown	`Number`	0
infinite	Whether to loop infinitely	`Boolean`	false
visible (v-model)	Whether is visible	`Boolean`	-
default-visible	Default visibility	`Boolean`	false
mask-closable	Whether to close the modal when mask is clicked	`Boolean`	true
closable	Whether to show close button	`Boolean`	true
actions-layout	Layout of action list	`Array`	[ 'fullScreen', 'rotateRight', 'rotateLeft', 'zoomIn', 'zoomOut', 'originalSize']
popup-container	Set the mount point of the pop-up box, the same as the to of teleport, the default value is document.body	`HTMLElement` `String`	-

Preview Group Events

Name	Description	Type
change	Image switch	-
visible-change	Preview visibility change	-

Preview Group Slots

Name	Description
actions	Customize additional action items

Preview Action Attributes

Name	Description	Type	Default
name	The name of the action	`String`	-
disabled	Whether to disable the action	`Boolean`	false

FAQ

Property Description for preview

1.Keyboard Shortcuts - keyboard Setting this property to true enables corresponding keyboard shortcuts based on the actions-layout settings.

esc：close preview
left: switch to the previous image
right: switch to the next image
up: zoom in on the image
down: zoom out on the image
space: restore to original size

2.Default Scaling - defaultScale This property defines the default scaling factor for images. For instance, when set to 1.5, images will be enlarged by 1.5 times their original size by default.

3.Scroll Zoom Rate - zoomSate The zoomSate property controls the scaling rate of images during scrolling. Taking 1.3 as an example, each scrolling action will result in an image zoom-in or zoom-out by a factor of 1.3.

Image ​

Basic ​

Show caption ​

Extra operations ​

Error state ​

Loading ​

Progressive loading ​

Preview action bar ​

Multi-image preview ​

Use preview alone ​

Use PreviewGroup alone ​

Popup container ​

Image API ​

Image Attributes ​

Image Events ​

Image Slots ​

Preview Attributes ​

Preview Events ​

Preview Slots ​

Preview Group Attributes ​

Preview Group Events ​

Preview Group Slots ​

Preview Action Attributes ​

FAQ ​

Property Description for preview ​