< DIV> < image style =“width:280px; height:280px; margin-left:250px; margin-top:100px”:src =“picPath”>< / image>< / DIV>
在上面的foo.vue中,它指定了图像的宽度和高度,但在某些情况下,我们…
只需使用load事件。例如:
<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>