test/pages/components/image-onload.vue

<template>
  <div>
    <panel title = 'image-onload' :padding-body='0'>
      <div style='flex-direction:row'>
        <image class='mr-base' style="width: 300;height: 300;" src="https://gw.alicdn.com/tps/TB1bEMYKXXXXXaLaXXXXXXXXXXX-360-388.png" @load="onload"></image>
        <image class='mr-base' style="width: 300;height: 300;border-width:2px;" src="https://cn.vuejs.org/images/logo.png1" @load="onloadFailed"></image>
      </div>
      <panel title='校验结果：'>
        <text test-id='imgSize' style="font-size:30px">{{size}}</text>
        <text test-id='download' style="font-size:30">{{download}}</text>
      </panel>
    </panel>
    <wxc-desc>
      <text class='desc'>
测试点：
  * 

测试方式：
  * 
  * 
      </text>
    </wxc-desc>
  </div>
</template>
<script>
  module.exports = {
    data : {
      size:"-1,-1",
      download:'success'
    },
    components: {
      "wxc-desc":require('../include/wxc-desc.vue'),
      panel: require('../include/panel.vue'),
      button: require('../include/button.vue'),
    },
    methods : {
      onload : function(e) {
        nativeLog(JSON.stringify(e))
        this.size = e.size.naturalWidth + ',' + e.size.naturalHeight;
      },
      onloadFailed:function(e) {
        if (e.success){
          this.download = 'success'; 
        }else {
          this.download ='failed';
        }
      }
    }
  }
</script>

<style scoped>
  .mr-base{
    margin: 10px;
  }
  .desc{
    color:#aa0000;
    font-size: 30px;
  }
  .input{
    width: 500px;
    height:100px;
    border-width: 1px;
  }
</style>