How to change imageview height dynamically after network image loaded rather then fix image height?

Question

<div>
  <image style="width: 280px;height: 280px;margin-left:250px;margin-top:100px" :src="picPath"></image>
</div>

In above foo.vue, it specified the image width and height, but in some cases, we need to change image width and height after image loaded into imageview. My question is, in order for that, what should i do from foo.vue to native android/ios? Thanks in advance.

Answer 1

just use the load event. e.g:

<template>
    <div style="width: 750px; background-color: #f4f4f4; margin-top: 10px;" v-for="(item, index) in storyJson">
      <image v-if="item.type === 'image'" :src="item.value" style="width: 750px; height: 468px; margin-bottom: 10px;" @load="load" resize="contain"></image>
    </div>
</template>

<script>
module.exports = {
  props: {
    storyJson: {
      default: function () {
        return [];
      }
    }
  },
  methods: {
    setUpStoryJson(json) {
      this.storyJson = JSON.parse(json);
    },
    load(e) {
      const naturalSize = e.size;
      const showHeight = naturalSize.naturalHeight * 750 / naturalSize.naturalWidth;
      e.target.setStyle('height', showHeight + 'px');
    }
  }
};</script>