feat: 图片压缩范例

This commit is contained in:
Burt 2024-01-12 15:24:28 +08:00
parent ad7b990413
commit c71d3b3053
6 changed files with 22 additions and 0 deletions

View File

@ -111,6 +111,10 @@
}
}
},
{
"path": "pages/demo/img-min/index",
"type": "page"
},
{
"path": "pages/index/demo/component-auto-import",
"type": "page",

Binary file not shown.

After

Width:  |  Height:  |  Size: 745 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 245 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 MiB

View File

@ -0,0 +1,17 @@
<template lang="">
<view class="m-4 text-center">
<view class="mb-2 text-orange-500">
原始图片是一个很大的2.5Mbuild之后生成的图片只有1.1M体积下降 56%
</view>
<image :src="bgImg" mode="scaleToFill" />
<view class="mb-4">对比图如下2图如果看不清请看代码原图</view>
<image :src="beforeImg" mode="widthFix" class="w-full" />
<image :src="afterImg" mode="widthFix" class="w-full" />
</view>
</template>
<script lang="ts" setup>
import bgImg from './bg-1.png'
import beforeImg from './before.png'
import afterImg from './after.png'
</script>

1
uni-pages.d.ts vendored
View File

@ -13,6 +13,7 @@ interface NavigateToOptions {
"pages/lottery/nine-grid" |
"pages/my/index" |
"pages/throughout/index" |
"pages/demo/img-min/index" |
"pages/index/demo/component-auto-import" |
"pages/index/demo/mp-weixin-share" |
"pages/index/demo/navbar" |