Image 图片

基础用法

<template>
  <plv-image
    width="300px"
    height="170px"
    src="https://liveimages.videocc.net/uploaded/images/2021/05/fy7vj4svur.png"
  />
</template>

显示代码

加载失败

<template>
  <plv-image
    width="300px"
    height="170px"
    src="https://liveimages.videocc.net/uploaded/666.png"
  />
</template>

显示代码

渐进加载

<template>
  <div>
    <plv-image
      width="300px"
      height="200px"
      :src="`http://liveimages.videocc.net/uploadimage/20210501/chat_img_1778938_16198677801463.jpeg?count=${count}`"
    />

    <plv-button style="margin-top: 8px;" @click="refresh">Reload</plv-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1
    };
  },

  methods: {
    refresh() {
      this.count += 1;
    }
  }
};
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
src	图片地址	String	-	-
width	宽度	String	-	-
height	高度	String	-	-
gradual	是否使用渐进加载	Boolean	-	true
gradualSize	渐进图尺寸，{ width, height }	Object	-	-
no-cache	是否忽略浏览器图片缓存，自动在地址添加时间戳参数	Boolean	-	false

Events

事件名称	说明	回调参数
load	图片加载完成	Image
error	图片加载失败	Image