vue3-image-viewer

安装/Installation

npm i vue3-image-viewer 或者/or yarn add vue3-image-viewer

引入/Import

import { Image } from "vue3-image-viewer";
import "vue3-image-viewer/dist/style.css"

使用/Use

<script setup lang="ts">
  const imgs = [
    "https://photos.google.com/photo/AF1QipOYIGOfsvgpc52sep9Hfn7agaFdEColKDliOq9V",
    "https://photos.google.com/photo/AF1QipN68f6aaR5X9rCsDzx0BRBT3Jf75cSl_2ahuMa4",
    "https://photos.google.com/photo/AF1QipOir42BbOxnI_fs4zA3A-kPArijqkvzZLfUjjMH",
  ];
  const images = [
    { url: imgs[0], title: "标题/Title", desc: "描述/Desc" },
    { url: imgs[1], title: "标题/Title", desc: "描述/Desc" },
    { url: imgs[2], title: "标题/Title", desc: "描述/Desc" },
  ];
</script>

<template>
  <div v-for="(item, index) in images" :key="index">
    <Image
      style="width: 200px;height: 200px;"
      :src="item.url"
      fit="contain"
      preview
      :images="images"
      :initialIndex="index"
      hideOnClickModal
      loop
    />
  </div>
</template>

参数/Props

参数	说明	类型	默认值
base	地址前缀	string	""
src	图片地址	string	""
token	token参数	string	""
aspectRatio	固定宽高比	number	0
fit	object-fit	string	"none"
lazy	懒加载	boolean	false
hideOnClickModal	点击遮罩关闭预览	boolean	false
initialIndex	初始预览图像索引	number	0
preview	是否开启预览	boolean	false
images	预览列表	array	[]
loop	开启循环	boolean	false
preload	预览预加载	array or boolean	[0,2]
width	盒子宽度	string	""
height	盒子高度	string	""
alt	[alt(https://www.runoob.com/tags/att-img-alt.html)	string	""
referrerPolicy	referrerPolicy	string	""
bgColor	背景颜色	string	"black"

参数说明/Props ps

• src: 如果src是绝对地址，则base, token不生效，如果是相对地址，返回base+src+?token="abc"
• aspectRatio: 如果设置了aspectRatio，则高度由宽度和aspectRatio决定
• lazy: 如果设置了懒加载，则会监听第一个设置了滚动的父元素的滚动事件
• preload: 如果设置为false则关闭预加载，如果设置为[1,2]，则在查看当前图片的同时会同时加载左边1张右边2张图片

组件事件/Event

• error: 图片加载出错事件/ Same as native error
• load: 图片加载完成事件/ Same as native load
• close: 关闭预览事件 / Emit when close the preview
• switch: 切换预览图片事件，返回下标 / Emit when switch the preview, return current index

支持插槽/Slot

• error:加载出错占位/ Triggers when image load failed
• loading:加载中占位/ Triggers when image is loading
• footer:图片底部占位/ Placeholder on the bottom

预览效果/Preview

联系我/Contact me

• QQ:995413842
• 微信:zhoulh1994
• gmail:[e-mail]