uniapp图片预览接口（uni.previewImage）黑屏问题处理

        某个项目，服务器端对图片请求加了一些限制，用image src绑定资源链接的方式可以显示，但是用浏览器直接输入地址是无法请求的，在前端使用uni.previewImage也无法显示。为此，我们只能用image src绑定资源链接来自行开发图片预览控件。插件市场上也有免费的插件提供下载，我使用的是这个插件q-previewImage，完美地解决了黑屏的问题。

<template>
    <view>
        <image v-for="(item, index) in imgs" :key="index" :src="item" @click="preview(item)"></image>
        <q-previewImage ref="previewImage" :urls="imgs" @onLongpress="onLongpress" @open="open" @close="close"></q-previewImage>
    </view>
</template>

<script>
export default {
    data() {
        return {
            imgs: [],
        };
    },

    methods: {
        preview(url) {
            this.imgs = ['https://web-assets.dcloud.net.cn/unidoc/zh/multiport-20210812.png', 'https://web-assets.dcloud.net.cn/unidoc/zh/uni-function-diagram.png'] //设置图片数组
            // #ifdef MP-WEIXIN
            this.$nextTick(()=>{
                 this.$refs.previewImage.open(url); // 传入当前选中的图片地址(小程序必须添加$nextTick，解决组件首次加载无图)
            })
            // #endif

            // #ifndef MP-WEIXIN
            this.$refs.previewImage.open(url); // 传入当前选中的图片地址
            // #endif
        },
        onLongpress(e){ //长按事件

        },

        /* open和close方法一般用不到，但是在一些特殊场景会用到，
         * 比如预览图片时你需要覆盖 NavigationBar和 TabBar，
         * 或者在app中需要预览图片时覆盖住原生组件，比如video或者map等，
         * 你可以根据open和close去做一些操作，例如隐藏导航栏或者隐藏一些原生组件等
         */
        open(){ //监听组件显示 （隐藏TabBar和NavigationBar，隐藏video原生组件）
            
        },
        close(){ //监听组件隐藏 （显示TabBar和NavigationBar，显示video原生组件）
            
        }
    }
 };
</script>