uni-app uni.previewImage 传入base64 图片地址时，图片显示尺寸过大，超出屏幕外

uni-app uni.previewImage 传入base64 图片地址时，图片显示尺寸过大，超出屏幕外

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

14.4.1

HBuilderX类型：

正式

HBuilderX版本号：

4.64

手机系统：

Android

手机系统版本号：

Android 12

手机厂商：

模拟器

手机机型：

android 模拟器

页面类型：

vue

vue版本：

vue3

打包方式：

云端

项目创建方式：

HBuilderX

示例代码：

uni.previewImage({
urls: ['data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABcCAYAAADj79JYAAADmUlEQVR4Xu3c244jIQyE4c37P3RW2rsm0nwqmT7MpubW4DY/hTF0Z17v9/v9p3+XEXgV+GWs/z2owK/lXeAX8/4E/nq9Lo1BW8gaz9pe9nUwd4/vI6XcHZAAFfhwPVThTSlDCR27f6zItSxMc2IanfynKU0rJE1R6XhS/8zh6YAUcIEvRAVEQGWX/yp888m/wEOFTxUo4MqJWkGrPS0jzx5fnMPPDqjAl5RS4Cj7lrJ6XBYW+JcBV05uDkdKUp2vTVYrThMkuzZp9f/1KUUDrMKr8IMGHlcWKkVoiVfhocIL/OI6vMAL/Mcspk18XKWkOVRH9bQs1PNTf2qv56XjizfNNIA0ILXX8wVQdb38yy7/BX719fPTXrF9vcK1hKb2eNPRbVxon8av/vGmKYdTe4Hf/JkEN51QwZrQqWDUvwq/W1BP/1xZipfCnmZ//OfKBX6xZAq8wEcE4pOmFDe1azR3+9fBjFcL6UlzOmD1L/DhCwTVwVJEqqizJzSN56N9FX5Ekk5Y3D6tw/VGJlX01N+qoN0rRopWCuRJUw6mgDQhApg+Px2PJkzPZ/xV+PFXewUevlMVMKUI9d+ucDlUQBoQl9zwcunulKVNlAcfAUpzpPxpwvW8AodiU0AFDgJS7NcDl4IEUCkj9b97QvT86R6l/vF9eIEPT6a76/Aq/Od/sFSFLwpRSlDZq/5xWSgFX51yFI8Aqb/qavnnXcoU2LS/NjX5p8KGZWrqv8ALPPsvfv+dwrWkz7anQJVjZVcOTsfLlJOWhWkAafsCT4kN2xf4EGDa/euAa8ApQLVXzlOO1V1Lale86Z7wEb/e2iuAqb3Ah29c0gko8AL/UTOnp5RUgVL4NODdOV3+tt+1KIcX+BH5dBPmbWGBF/iBgFKU7I9PKWmdni5B+deKE2D5352z4zpcwLRJqr/sAiCFpv71PE2oeMQ5/GyFyH8VjimVwmSX4qrwhYCASrFcopt/max4FY/G87iUogFNFS2gsiu+At+8Agp8M9CvU7iqFG2i6s8lH77Vj1NcepeiAaVAditK8RV4+JOSdELVXgqd9o8/BDpbgWf7nwKb9h8D1y4t+/RoPFVkmnIUb+wvzeECKrsGoP4FHhIq8CXJ7AYiRapq0HzGSzos+8Qjfr5SigY8tU83TW1qMZCzD1IFfvx6N1W0BBNXKVMFq78CVv8qPCT09cBDXm0eEoh/xRb6b/OFQIFfLIkCvxj4X18bD1YznAgKAAAAAElFTkSuQmCC']
```

### 操作步骤：
- 运行以上代码

### 预期结果：
- 图片完全显示在屏幕区域内，且能正常缩放。

### 实际结果：
- 显示尺寸过大，超出屏幕，且无法缩放。

### bug描述：
uni.previewImage 传入base64 图片地址时，图片显示尺寸过大，超出屏幕外，且无法缩放。

更多关于uni-app uni.previewImage 传入base64 图片地址时，图片显示尺寸过大，超出屏幕外的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

并未复现此问题，麻烦发个可复现demo

更多关于uni-app uni.previewImage 传入base64 图片地址时，图片显示尺寸过大，超出屏幕外的实战教程也可以访问 https://www.itying.com/category-93-b0.html


手机窄屏正常，我上面的是平板宽屏。

问题已复现，感谢反馈，已加分

这个问题的原因是base64图片没有指定原始尺寸，导致预览时默认以较大尺寸显示。解决方法如下：

  1. 对于base64图片，建议先转成临时文件路径再预览：
const base64 = 'data:image/png;base64,...';
const tempFilePath = `${uni.env.USER_DATA_PATH}/temp.png`;
uni.getFileSystemManager().writeFile({
  filePath: tempFilePath,
  data: base64.split(',')[1],
  encoding: 'base64',
  success: () => {
    uni.previewImage({
      urls: [tempFilePath]
    });
  }
});
  1. 或者可以在显示前先获取图片信息，设置合适的显示尺寸：
uni.getImageInfo({
  src: base64,
  success: (res) => {
    // 可以根据res.width/res.height调整显示
    uni.previewImage({
      urls: [base64]
    });
  }
});
回到顶部