image-large.uvue

<template>
  <scroll-view style="flex: 1;">
    <page-head :title="title"></page-head>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title">
        <text class="uni-title-text">大图示例</text>
      </view>
      <view class="uni-common-mt" v-for="_ in 10">
        <text class="uni-subtitle-text">width={{width}}px height={{height}}px memory={{memory}}MB</text>
        <image class="image" mode="widthFix" :src="src" @load="load"></image>
      </view>
    </view>
  </scroll-view>
</template>

<script>
  export default {
    data() {
      return {
        title: 'image-large',
        src: 'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/img/building.jpg',
        width: 0,
        height: 0,
        memory: 0
      }
    },
    methods: {
      load(event : ImageLoadEvent) {
        this.width = event.detail.width;
        this.height = event.detail.height;
        this.memory = Math.round(this.width * this.height * 4 / 1024 / 1024 * 100) / 100;
      }
    }
  }
</script>

<style>
  .image {
    width: 100%;
  }
</style>