Image

图片预览组件

基础用法

指定 src 属性，定义图片的路径

vue

<template> <ap-image src="https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="基础用法" /> </template>

显示代码

指定缩放尺寸

width 和 height 设置一个即可，始终保持原图横宽比，若两个都传，默认使用 width

vue

<template> <ap-image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?undefined" width="500" /> </template>

显示代码

禁用预览

通过指定 preview 属性, 来限制预览

vue

<template> <ap-image src="https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" :preview="false" /> </template>

显示代码

加载失败

使用命名插槽 #error 可以自定义图片加载出错的显示

vue

<template> <ap-image src="https://img2.baidu.com/1111" :preview="false"> <template #error> 图片加载出错 </template> </ap-image> </template>

显示代码

Props

参数	说明	类型	是否必传	默认值
src	原图片地址	string	是	-
width	缩放图片，始终保持原图横宽比，和 height 属性两者传一个即可，若都传默认 width 生效	string 、Number	否	-
height	缩放图片，始终保持原图横宽比	string 、Number	否	-
alt	img alt 属性，图像描述	string	否	'img'
preview	是否可以预览	boolean	否	true

Slots

名称	说明
error	图片加载失败的占位内容