image-format.uvue

<template>
	<scroll-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 supportFormats" :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 class="uni-title">
				<text class="uni-title-text">暂不支持的格式</text>
			</view>
			<view v-for="(item,index) in notSupportFormats" :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" @error="imageErrorEvent"></image>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'image-format',
				supportFormats: [
					{
						format: 'bmp',
						src: '/static/test-image/logo.bmp'
					},
					{
						format: 'gif',
						src: '/static/test-image/logo.gif'
					},
					{
						format: 'ico',
						src: '/static/test-image/logo.ico'
					},
					{
						format: 'jpg',
						src: '/static/test-image/logo.jpg'
					},
					{
						format: 'png',
						src: '/static/test-image/logo.png'
					},
					{
						format: 'webp',
						src: '/static/test-image/logo.webp'
					},
					{
						format: 'heic（Android10+支持）',
						src: '/static/test-image/logo.heic'
					}
				] as Array<ImageFormat>,
				notSupportFormats: [
					{
						format: 'avif',
						src: '/static/test-image/logo.avif'
					},
					{
						format: 'tif',
						src: '/static/test-image/logo.tif'
					}
				] as Array<ImageFormat>
			}
		},
		methods: {
			imageErrorEvent(e : ImageErrorEvent) {
				console.log("图片加载错误", e.detail); //TODO tif打不出正确的错误日志
				// 图片加载失败，加载本地占位图
				e.target?.setAttribute('src', '/static/template/drop-card/dislike.png')
			}
		},
	}
	
	type ImageFormat = {
		format : string
		src : string
	}
	
</script>

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