edu-mini/edu-plus/pages/edu/edu.vue

<template>
	<view>
		<painter style="position:fixed;top:-9999rpx" :palette="info" @imgOK="onImgOK"></painter>
		
		<image :src="image" style="width: 100%;height: 500rpx;"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				image:'',
				info: {
					width: "500rpx",
					height: "500rpx",
					background: "#eee",
					views: [{
							type: "image",
							url: "../../static/edu.png",
						},
						{
							type: "text",
							text: "未设置height、width时",
							css: {
								right: "0rpx",
								top: "60rpx",
								fontSize: "30rpx",
							},
						},
						{
							type: "image",
							url: "/static/edu.png",
							css: {
								width: "200rpx",
								height: "200rpx",
								top: "230rpx",
							},
						},
						{
							type: "text",
							text: "mode: 'aspectFill' 或 无",
							css: {
								left: "210rpx",
								fontSize: "30rpx",
								top: "290rpx",
							},
						},
						{
							type: "image",
							url: "/static/edu.png",
							css: {
								width: "200rpx",
								height: "200rpx",
								mode: "scaleToFill",
								top: "500rpx",
							},
						},
						{
							type: "text",
							text: "mode: 'scaleToFill'",
							css: {
								left: "210rpx",
								top: "560rpx",
								fontSize: "30rpx",
							},
						},
						{
							type: "image",
							url: "/static/edu.png",
							css: {
								width: "200rpx",
								height: "auto",
								top: "750rpx",
							},
						},
						{
							type: "text",
							text: "设置height为auto",
							css: {
								left: "210rpx",
								top: "780rpx",
								fontSize: "30rpx",
							},
						},
					],
				}
			}
		},
		methods: {
			onImgOK(e) {
				console.log("ium",e)
				this.image = e.detail.path;
			},
		}
	}
</script>

<style scoped>

</style>