uniapp 图片预览随手机旋转

uniApp 提供了一种便捷的方式来处理图片预览随手机屏幕旋转自动调整的功能。在 uni-app 开发中，你可以使用内置的 Image 组件，并结合 Vue 的 `onload` 或者 `lazyload` 事件以及设备的 orientation API 来实现图片预览的自适应。

首先，在组件模板中，设置 Image 组件加载图片：

<view class="preview-image">
  <image :src="imageUrl" @load="onLoad" :lazyload="{el:'.preview-image',placeholder: 'default.jpg'}"></image>
</view>

然后，在 JavaScript 部分编写 `onLoad` 函数，检测设备旋转变化并更新图片展示：

export default {
  onLoad: function (e) {
    const img = e.target;
    uni.addEventListener('orientationchange', () => {
      // 获取当前设备的方向
      const deviceOrientation = uni.getSystemInfoSync().orientation;
      // 根据设备方向切换图片显示模式
      if (deviceOrientation === 'portrait') {
        img.style.transform = 'rotate(0deg)';
      } else if (deviceOrientation === 'landscape') {
        img.style.transform = 'rotate(-90deg)';
      }
    });
  },
  data() {
    return {
      imageUrl: '默认图片地址',
    };
  },
}

这里假设图片默认是以横屏展示的，当设备从竖向变为横向时，图片会顺时针旋转90度以匹配新的屏幕方向。