uniapp预览图片得时候,显示原图,但是超出预览边界
时间: 2023-12-02 17:03:59 浏览: 61
Uniapp提供了uni-image-preview组件来实现预览图片的功能,但是默认情况下,图片会根据预览容器的大小进行缩放,如果图片大小超出预览容器,会进行裁剪,导致图片显示不完整。
如果想要显示原图,可以通过设置uni-image-preview组件的mode属性为"original",这样图片就会按照原始大小显示,不会进行缩放或者裁剪。
```
<uni-image-preview :urls="imageUrls" :mode="original"></uni-image-preview>
```
需要注意的是,如果图片原始大小超出了预览容器的大小,图片就会超出预览边界,可以通过设置预览容器的样式来解决这个问题。比如设置预览容器的overflow属性为"scroll",这样就可以显示滚动条,用户可以通过滚动条来查看完整的图片。
```
<view class="preview-container">
<uni-image-preview :urls="imageUrls" :mode="original"></uni-image-preview>
</view>
.preview-container {
height: 100vh;
overflow: scroll;
}
```
通过以上设置,就可以在预览图片时显示原图,并且可以通过滚动条查看完整的图片了。
阅读全文