vue移动端项目vant组件库之image

vue移动端项目vant组件库之image

main.js

import {
    
     Lazyload } from 'vant';
Vue.use(Lazyload);

页面路由组件

<template>
  <div class="pd30">
    <h3>原图 16:11</h3>
    <img
      style="width: 160px; height: 110px"
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    />
    <h3>基础用法</h3>
    <van-image
      width="100"
      height="100"
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    />
    <h3>填充模式</h3>
    <van-image
      width="100"
      height="100"
      fit="contain"
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    />
    <h3>圆形图片</h3>
    <!-- 通过 round 属性可以设置图片变圆，注意当图片宽高不相等且 fit 为 contain 或 scale-down 时，将无法填充一个完整的圆形 -->
    <van-image
      round
      width="100"
      height="100"
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    />
    <van-image
      round
      width="100"
      height="100"
      fit="contain"
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    />
    <h3>图片懒加载</h3>
    <!-- 设置 lazy-load 属性来开启图片懒加载，需要搭配 Lazyload 组件使用。可以自定义loading -->
    <van-image
      width="100"
      height="100"
      lazy-load
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    >
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>
    <h3>加载失败提示 找一张不存在的图片</h3>
    <van-image src="https://img01.yzcdn.cn/vant/cat11111.jpeg" class="vanimage">
      <div slot='error' class="error">
        <!-- 使用solt的话 需要自行控制样式 -->
          加载失败
      </div>
    </van-image>
  </div>
</template>

<script>
import {
    
     Image, Loading } from "vant";
export default {
    
    
  components: {
    
    
    vanImage: Image,
    vanLoading: Loading,
  },
};
</script>

<style lang="scss" scoped>
.vanimage{
    
    
    /deep/ .van-image__error{
    
    
        position: unset;
    }
    .error{
    
    
        width:100px;
        line-height: 100px;
        text-align: center;

    }
}



</style>

效果