uni-app App 端图片预览打不开问题排查与修复实录

// utils/image-viewer.js —— 状态管理
import { reactive } from 'vue'
import { onHide, onBackPress } from '@dcloudio/uni-app'

const viewerState = reactive({
    visible: false,
    urls: [],
    current: 0,
})

export function useImageViewer() {
    return viewerState
}

export function openImageViewer(urls = [], current = 0) {
    const list = urls.filter((u) => typeof u === 'string' && u)
    if (!list.length) return
    viewerState.urls = list
    viewerState.current = current
    viewerState.visible = true
}

export function closeImageViewer() {
    viewerState.visible = false
}

export function previewImage({ urls = [], current = 0 } = {}) {
    openImageViewer(urls, current)
}

export function useImageViewerBackControl() {
    onBackPress(() => {
        if (viewerState.visible) {
            closeImageViewer()
            return true
        }
    })
    onHide(() => {
        if (viewerState.visible) closeImageViewer()
    })
}

<!-- components/image-viewer.vue —— 预览弹窗 -->
<template>
    <view v-if="viewer.visible" class="image-viewer" @tap="close">
        <view class="image-viewer-bar" @tap.stop>
            <text class="image-viewer-count">{{ viewer.current + 1 }} / {{ viewer.urls.length }}</text>
            <text class="image-viewer-close" @tap="close">×</text>
        </view>
        <swiper
            class="image-viewer-swiper"
            :current="viewer.current"
            :indicator-dots="false"
            circular
            @change="e => viewer.current = e.detail.current"
            @tap.stop="close"
        >
            <swiper-item v-for="(url, index) in viewer.urls" :key="index">
                <image class="image-viewer-image" :src="url" mode="aspectFit" @tap.stop="close" />
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup>
import { useImageViewer, closeImageViewer } from '@/utils/image-viewer'
const viewer = useImageViewer()
const close = () => closeImageViewer()
</script>

<style scoped lang="scss">
.image-viewer {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 99999;
    display: flex;
    flex-direction: column;
}
.image-viewer-bar {
    flex-shrink: 0;
    padding: 0 24px;
    height: 44px;
    margin-top: env(safe-area-inset-top);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
}
.image-viewer-count { font-size: 15px; opacity: 0.85; }
.image-viewer-close { font-size: 28px; line-height: 1; padding: 4px 8px; }
.image-viewer-swiper { flex: 1; width: 100%; }
.image-viewer-item { display: flex; align-items: center; justify-content: center; }
.image-viewer-image { width: 100%; height: 100%; }
</style>

import { previewImage, useImageViewerBackControl } from '@/utils/image-viewer'
import ImageViewer from '@/components/image-viewer.vue'
useImageViewerBackControl()

<image-viewer />

// 旧代码
uni.previewImage({ current: url, urls })

// 新代码
previewImage({ current: url, urls })