uniapp实现预览图片功能

在uniapp框架中要实现图片预览

<image :src="baseUrl+imgUrl" mode="aspectFill" v-for="(imgUrl, index) in getAnnexUrls()" :key="index" @click="previewImage(index)"></image>

这是我从后端那里拿到的数据，:src="baseUrl+imgUrl"动态渲染，mode="aspectFill"将图片设置为自适应显示就不会出现图片被挤压，@click="previewImage(index)"点击事件传了图片的index，

previewImage(index) {
                uni.previewImage({
                    urls: this.getAnnexUrls().map(imgUrl => this.baseUrl + imgUrl),
                    current: index
                });
            }

方法如上，将index传入方法中，调用uni.previewImage组件，urls是填图片的地址，我这里是.map查询在getAnnexUrls里面每个item的imgUrl，然后因为获取到的是存在数据库的地址，就需要每个都加上baseUrl服务器地址才是一个图片完整的地址。 current: index是传入进来的index，然后就简单的完成啦