# Image 图片
# 基础用法
<vp-image :src="imgSrc1"></vp-image>
<script>
export default {
data() {
return {
imgSrc1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
};
},
};
</script>
# fit 属性
<vp-image v-for="img in imgList1"
:key="img.id"
:src="img.src"
width="500px"
height="400px"
:fit="img.fit" >
</vp-image>
<script>
export default {
data() {
return {
imgSrc1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
imgList1: [
{
id: 1,
src: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
fit: "fill",
},
{
id: 2,
src: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
fit: "contain",
},
{
id: 3,
src: "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
fit: "cover",
},
{
id: 4,
src: "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
fit: "none",
},
{
id: 5,
src: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
fit: "scale-down",
},
],
};
},
};
</script>
# 懒加载
loading...
loading...
loading...
loading...
loading...
<vp-image v-for="img in imgList1"
:key="img.id"
:src="img.src"
width="500px"
height="400px"
lazy
@load="loadHandle" >
</vp-image>
<script>
export default {
data() {
return {
imgSrc1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
imgList1: [
{
id: 1,
src: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
},
{
id: 2,
src: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
},
{
id: 3,
src: "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
},
{
id: 4,
src: "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
},
{
id: 5,
src: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
},
],
};
},
methods: {
loadHandle(e) {
console.log(e);
}
}
};
</script>
# 预览
<vp-image :src="imgSrc1" :previewSrc="imgSrc1" ></vp-image>
<script>
export default {
data() {
return {
imgSrc1: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
};
},
};
</script>
# Image Attributes
属性名 | 类型 | 属性值 | 描述 | 默认值 |
---|---|---|---|---|
src | String | 图片地址 | "" | |
alt | String | 图片代替文本 | "" | |
width | String | 图片宽度 | "300px" | |
height | String | 图片高度 | "200px" | |
lazy | Boolean | true | false | 是否懒加载 | false |
fit | String | "fill"|"contain"|"cover"|"none"|"scale-down" | 原生object-fit | "fill" |
previewSrc | String | 图片地址 | "" |
# Image Events
事件名 | 描述 | 返回值 |
---|---|---|
load | 懒加载成功 | event |
error | 懒加载失败 | event |