如何在加载网络图像后动态更改图像视图高度，然后固定图像高度

Question

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

在上面的foo.vue中，它指定了图像宽度和高度，但是在某些情况下，我们需要在加载到ImageView的图像后更改图像宽度和高度。我的问题是，为此，从foo.vue到本地android/ios我该怎么办？预先感谢。

Answer 1

只需使用加载事件即可。例如：

<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>