uni-app中image点击缩放失效主因是默认不触发原生触摸事件且previewImage需HTTPS/绝对路径；须加@click.stop、确保src为可访问地址、current与urls中字符串完全一致。
uni-app中image组件点击缩放失效的常见原因
直接给image加@click并调用uni.previewImage是可行的，但很多人发现点击没反应或缩放手势失灵——根本原因是image默认不触发原生触摸事件（尤其在App端和小程序端），且previewImage需要完整、可访问的图片地址（不能是相对路径或临时base64）。
关键点：
-
image组件需显式设置@touchstart.stop或@click.stop防止事件冒泡干扰手势识别 - 微信小程序中，
previewImage的urls数组里每个地址必须是 HTTPS 或本地绝对路径（/static/xxx.jpg），不能是../../assets/xxx.png - H5端若用
v-for循环渲染多张图，确保每张图的src是响应式变量，否则预览时可能显示错图
用uni.previewImage实现单图点击放大
这是最轻量、兼容性最好的方案，无需引入第三方库，且自带双指缩放、拖拽、下载功能。
基础写法示例：
<template>
<image
:src="item.src"
@click="handlePreview(item.src)"
class="preview-img"
/>
</template>
<script>
export default {
methods: {
handlePreview(src) {
uni.previewImage({
urls: [src],
current: src,
loop: false // 是否可循环预览（单图设为false）
})
}
}
}
</script>
注意：
- 如果
src来自网络，务必确认服务器允许跨域（CORS头含Access-Control-Allow-Origin: *），否则App端可能白屏 - App端（iOS）对
file://路径支持不稳定，建议统一走uni.downloadFile先缓存再预览 - 不要在
handlePreview里做异步逻辑（如先uni.getImageInfo），previewImage会立即执行，异步结果来不及参与
多图轮播+缩放：传urls数组并指定current
当页面有多个image，想点击某一张后进入带左右滑动的全屏预览，并定位到当前图，必须正确构造urls和current参数。
典型错误是把current设成索引（如0），但current实际应填图片URL字符串（与urls中某一项完全一致）：
handlePreview(src, index) {
uni.previewImage({
urls: this.imgList.map(i => i.src), // 确保是纯字符串数组
current: src, // 必须是完整的、与urls中某项相等的字符串
loop: true
})
}
容易忽略的细节：
-
imgList里的src如果是动态拼接（如baseUrl + item.path），要确保拼接后与current传入的值完全一致（包括末尾斜杠、大小写） - 微信小程序中，
urls长度超过9张会自动截断，需前端自行分页或提示 - App端Android部分机型对超大图（>5MB）解码慢，可提前用
uni.compressImage压缩再展示缩略图
自定义手势缩放（不用previewImage）的取舍
如果业务要求在原位置缩放（非全屏）、或需叠加标注、涂鸦等交互，就得放弃previewImage，改用transform: scale() + touchmove计算。但这块坑极多：
- 小程序平台不支持
touchmove事件在image上原生触发，得套一层view并设catchtouchmove - 双指缩放需手动计算两指间距变化，iOS WebView对
scale动画卡顿明显，建议限制最大缩放倍数（如max-scale: 3） - uni-app的
px单位在不同端渲染精度不一致，缩放后元素偏移容易错位，推荐用rpx或%做容器布局 - 真机调试时，App端常因WebView内核差异导致
transform-origin行为异常，最好固定为center center
除非设计强依赖局部缩放交互，否则优先走uni.previewImage——它底层已针对各端做了大量适配，省掉80%的兼容性排查时间。
