UNIAPP：图片显示问题以及mode值

以下示例是不借助官方mode值时，用css控制，不过效果上与aspectFill类似。

<template>
	<view class="container">
		<view class="intro">本项</view>
		<view class="image-container">
			<image src="@/static/000.jpg" mode="aspectFill" class="ig" :style="bgimg(imageUrl)"/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: '/static/000.jpg',
			}
		},
		methods: {
			bgimg(param) {
				return {
					'background-image': `url(${param})`,
					'background-repeat': 'no-repeat',
					'background-position': 'center',
					'background-size': 'cover',
					'width': '100px',
					'height': '100px',
				};
			}
		}
	}
</script>

<style>
	@import "/uni.scss";

	.container {
		display: flex;
	}

	.image-container {
		width: 100%;
		height: 100px;
		overflow: hidden;
	}
	
	.ig {
		width: 100px;
		height: 100px;
	}
</style>

mode有效值

mode有14种模式，其中5种是缩放模式，9种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
缩放	heightFix	高度不变，宽度自动变化，保持原图宽高比不变 App和H5平台HBuilderX 2.9.3+ 支持、微信小程序需要基础库2.10.3
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

#示例

<template>
    <view class="page">
        <view class="image-list">
            <view class="image-item" v-for="(item,index) in array" :key="index">
                <view class="image-content">
                    <image style="width: 200px; height: 200px; background-color: #eeeeee;" :mode="item.mode" :src="src"
                        @error="imageError"></image>
                </view>
                <view class="image-title">{{item.text}}</view>
            </view>
        </view>
    </view>
</template>

原图

uniapp