image-format.uvue

<template>
	<view>
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title">
				<text class="uni-title-text">支持的图片格式示例</text>
			</view>
			<view v-for="(item,index) in data" :key="index">
				<text class="uni-subtitle-text">{{item.format}}</text>
				<view class="uni-center" style="background:#FFFFFF;">
					<image class="image" mode="widthFix" :src="item.src"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'image-format',
				data: [{
						format: 'png',
						src: '/static/logo.png'
					},
					{
						format: 'jpg',
						src: '/static/logo.jpg'
					},
					{
						format: 'webp',
						src: '/static/logo.webp'
					},
					{
						format: 'bmp',
						src: '/static/logo.bmp'
					},
					{
						format: 'gif',
						src: '/static/logo.gif'
					}
				] as Array < ImageFormat >
			}
		}
	}

	class ImageFormat {
		format: string;
		src: string;

		constructor(format: string, src: string) {
			this.format = format;
			this.src = src;
		}
	}
</script>

<style>
	.image {
		margin: 40rpx auto;
		width: 200rpx;
	}
</style>