更新image示例

69f3716d · DCloud-yinjiacheng · a09a3dc8 · 69f3716d · 69f3716d · 69f3716d
5 changed file
--- a/pages/component/image/image-format.uvue
+++ b/pages/component/image/image-format.uvue
 <template>
-	<view>
+	<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 data" :key="index">
+			<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>
@@ -14,14 +14,14 @@
 			<view class="uni-title">
 				<text class="uni-title-text">暂不支持的格式</text>
 			</view>
-			<view>
-				<text class="uni-subtitle-text">tif</text>
+			<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 src="/static/test-image/logo.tif" @error="imageErrorEvent"></image>
+					<image class="image" mode="widthFix" :src="item.src" @error="imageErrorEvent"></image>
 				</view>
 			</view>
 		</view>
-	</view>
+	</scroll-view>
 </template>

 <script>
@@ -29,11 +29,7 @@
 		data() {
 			return {
 				title: 'image-format',
-				data: [
-					{
-						format: 'avif',
-						src: '/static/test-image/logo.avif' //TODO
-					},
+				supportFormats: [
 					{
 						format: 'bmp',
 						src: '/static/test-image/logo.bmp'
@@ -42,10 +38,6 @@
 						format: 'gif',
 						src: '/static/test-image/logo.gif'
 					},
-					{
-						format: 'heic',
-						src: '/static/test-image/logo.heic'
-					},
 					{
 						format: 'ico',
 						src: '/static/test-image/logo.ico'
@@ -61,22 +53,38 @@
 					{
 						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 >
+				] as Array<ImageFormat>
 			}
 		},
 		methods: {
-			imageErrorEvent(e:ImageErrorEvent) {
-				console.log("图片加载错误",e.detail); //TODO tif打不出正确的错误日志
+			imageErrorEvent(e : ImageErrorEvent) {
+				console.log("图片加载错误", e.detail); //TODO tif打不出正确的错误日志
+				// 图片加载失败，加载本地占位图
+				e.target?.setAttribute('src', '/static/template/drop-card/dislike.png')
 			}
 		},
 	}

 	class ImageFormat {
-		format: string;
-		src: string;
+		format : string;
+		src : string;

-		constructor(format: string, src: string) {
+		constructor(format : string, src : string) {
 			this.format = format;
 			this.src = src;
 		}

--- a/pages/component/image/image-large.uvue
+++ b/pages/component/image/image-large.uvue
 <template>
-	<view>
+	<scroll-view>
 		<page-head :title="title"></page-head>
 		<view class="uni-padding-wrap uni-common-mt">
 			<view class="uni-title">
@@ -10,7 +10,7 @@
 				<image class="image" mode="widthFix" :src="src" @load="load"></image>
 			</view>
 		</view>
-	</view>
+	</scroll-view>
 </template>

 <script>

--- a/pages/component/image/image-mode.uvue
+++ b/pages/component/image/image-mode.uvue
 <template>
-	<view>
+	<scroll-view>
 		<page-head :title="title"></page-head>
 		<view class="uni-padding-wrap uni-common-mt">
 			<view class="uni-title">
@@ -12,7 +12,7 @@
 				</view>
 			</view>
 		</view>
-	</view>
+	</scroll-view>
 </template>

 <script>
@@ -20,7 +20,8 @@
 		data() {
 			return {
 				title: 'image-mode',
-				data: [{
+				data: [
+					{
 						mode: 'scaleToFill',
 						description: '不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素'
 					},
@@ -76,16 +77,16 @@
 						mode: 'heightFix',
 						description: '高度不变，宽度自动变化，保持原图宽高比不变'
 					}
-				] as Array < ImageMode >
+				] as Array<ImageMode>
 			}
 		}
 	}

 	class ImageMode {
-		mode: string;
-		description: string;
+		mode : string;
+		description : string;

-		constructor(mode: string, description: string) {
+		constructor(mode : string, description : string) {
 			this.mode = mode;
 			this.description = description;
 		}

--- a/pages/component/image/image-path.uvue
+++ b/pages/component/image/image-path.uvue
 <template>
-	<view>
+	<scroll-view>
 		<page-head :title="title"></page-head>
 		<view class="uni-padding-wrap uni-common-mt">
 			<view class="uni-title">
@@ -12,7 +12,7 @@
 				</view>
 			</view>
 		</view>
-	</view>
+	</scroll-view>
 </template>

 <script>
@@ -26,12 +26,12 @@
 						description: '本地根路径'
 					},
 					{
-						src: '../../../static/test-image/logo.png', //TODO
+						src: '../../../static/test-image/logo.png',
 						description: '本地相对路径'
 					},
 					{
 						src: 'logo.png', //TODO
-						description: '本地当前路径'
+						description: '本地当前路径（暂不支持）'
 					},
 					{
 						src: 'file:///storage/emulated/0/Android/data/io.dcloud.uniappx/apps/__UNI__4517034/www/static/test-image/logo.png',
@@ -48,37 +48,44 @@
 					{
 						src: 'https://request.dcloud.net.cn/api/http/contentType/image/png',
 						description: '正确网络路径'
-					},{
+					},
+					{
 						src: 'https://request.dcloud.net.cn/api/http/contentType/wrongImage/gif',
 						description: '错误网络格式，假gif实为jpeg'
-					},{
+					},
+					{
 						src: 'https://request.dcloud.net.cn/api/http/contentType/wrongImage/jpeg',
 						description: '错误网络格式，假jpg实为png'
-					},{
+					},
+					{
 						src: 'https://request.dcloud.net.cn/api/http/contentType/wrongImage/png',
 						description: '错误网络格式，假png实为gif'
-					},{
+					},
+					{
 						src: 'https://request.dcloud.net.cn/api/http/contentType/404',
 						description: '错误网络地址404接口'
-					},{
+					},
+					{
 						src: 'https://request.dcloud.net.cn/api/http/contentType/404.png',
 						description: '错误网络地址，不存在的图片'
-					},
-				] as Array < ImagePath >
+					}
+				] as Array<ImagePath>
 			}
 		},
 		methods: {
-			imageErrorEvent(e:ImageErrorEvent) {
-				console.log("图片加载错误",e.detail); //TODO
+			imageErrorEvent(e : ImageErrorEvent) {
+				console.log("图片加载错误", e.detail);
+				// 图片加载失败，加载本地占位图
+				e.target?.setAttribute('src', '/static/template/drop-card/dislike.png')
 			}
 		},
 	}

 	class ImagePath {
-		src: string;
-		description: string;
+		src : string;
+		description : string;

-		constructor(src: string, description: string) {
+		constructor(src : string, description : string) {
 			this.src = src;
 			this.description = description;
 		}

--- a/pages/component/image/image.uvue
+++ b/pages/component/image/image.uvue
@@ -14,9 +14,9 @@
 			</view>
 			<view class="uni-btn-v">
 				<button type="primary" @tap="imagePath">图片路径示例</button>
-			</view>
-			<view class="uni-btn-v">
-				<button type="primary" @tap="imageLarge">大图示例</button>
+			</view>
+			<view class="uni-btn-v">
+				<button type="primary" @tap="imageLarge">大图示例</button>
 			</view>
 		</view>
 	</view>
@@ -29,10 +29,10 @@
 			}
 		},
 		methods: {
-			error(event: ImageErrorEvent) {
+			error(event : ImageErrorEvent) {
 				console.log(event.type, event.detail);
 			},
-			load(event: ImageLoadEvent) {
+			load(event : ImageLoadEvent) {
 				console.log(event.type, event.detail);
 			},
 			imageFormat() {
@@ -49,11 +49,11 @@
 				uni.navigateTo({
 					url: '/pages/component/image/image-path'
 				});
-			},
-			imageLarge() {
-				uni.navigateTo({
-					url: '/pages/component/image/image-large'
-				});
+			},
+			imageLarge() {
+				uni.navigateTo({
+					url: '/pages/component/image/image-large'
+				});
 			}
 		}
 	}