実際の作業では、画像処理の問題に遭遇することがよくあります.サーバー上の同じインターフェイスによって返される複数の画像のサイズは異なる場合があります.この記事では、ページがレンダリングされたときに画像の表示サイズを一定に保つ方法について、独自のアプローチについて説明します.最も
簡単な解決策は、イメージをラップするビューのサイズをイメージ内のサイズと一致させることです。実装は次のとおりです
。
.image_class{
width: 280rpx;
height: 160rpx;
image{
width: 280rpx;
height: 160rpx;
}
}
テンプレートでは:
<view>
<view class="image_class" v-if="item in imgList" :key=item.id>
<image :src="item.imageUrl" ></image>
</view>
</view>
イメージ タグで高さと幅の比率を 100% に設定しても機能しないことに注意してください。同じ問題が発生することを期待して、記録するだけです。