图片

版本说明

时间	修改人	备注
2025-04-24	YG	补充文档

一、基本展示规范

• 图片展示时，尺寸不能压缩变形
• 当图片资源不存在，界面不能展示裂开的图或者白屏，默认展示一张报错的图片
• 当禁止图片被选中时，需要给图片加一个css属性 pointer-events: none，防止部分安卓机点击图片时会覆盖在页面上
• 根据实际情况选择使用vant里Image的 fit 属性：contain、cover; （vant文档）
• 在小程序环境下可以使用 <image> 的 mode 属性：aspectFit、aspectFill、widthFix、heightFix;（微信小程序文档）
• 移动端展示类图片一般都要加图片预览功能，除了一些特殊情况，如：banner图、头像等。
• 图片预览使用vant的 ImagePreview 实现。
• 在UniApp中也可以使用 uni.previewImage() API实现跨平台的图片预览功能
• 图片懒加载：使用vant图片组件 vant-image 的 lazy-load 属性。
• 在UniApp中使用 <image> 组件的 lazy-load 属性实现懒加载

二、图片格式选择

• PNG格式：适用于需要透明度的图像、图标、插图等

  • 优点：支持透明度，无损压缩
  • 缺点：文件较大

• SVG格式：适用于图标、简单图形

  • 优点：矢量图形，缩放不失真，文件小
  • 缺点：不适合复杂图像，渲染复杂图形时性能较差

三、图片尺寸与优化

• 图片资源应部署在CDN上，提高加载速度

• 尺寸控制

  • 图片实际尺寸应与展示尺寸相匹配，避免过大造成资源浪费
  • 建议图片宽度不超过750px（满足2倍屏需求）
  • 图标类图片建议使用icon-font或SVG代替

• 图片压缩

  • 上传前应对图片进行适当压缩（不能有模糊感）
  • 可使用TinyPNG等工具进行无损压缩