AuthImage 认证图片

带认证的图片组件。支持 fileId/文件路径/URL 等多种来源，内置懒加载、加载失败重试、回退占位图和点击大图预览。

基本用法

<template>
  <!-- fileId 模式 -->
  <AuthImage src="file_abc123" alt="用户头像" />

  <!-- 普通 URL -->
  <AuthImage src="https://example.com/photo.jpg" />

  <!-- 带预览和回退 -->
  <AuthImage
    src="file_abc123"
    fallback="/default-avatar.png"
    preview
    @error="handleError"
  />
</template>

<script setup>
import { AuthImage } from '@/components/common'

const handleError = (err) => console.error('图片加载失败:', err)
</script>

Props

属性	类型	默认值	说明
src	String	''	图片来源：fileId、文件路径、或 http(s)/data/blob URL
fallback	String	''	加载失败时显示的回退图片 URL
alt	String	''	图片的 alt 属性
imgClass	String | Array | Object	''	应用于 <img> 元素的自定义 CSS 类
imgStyle	String | Object	''	应用于 <img> 元素的自定义内联样式
lazy	Boolean	true	启用基于 IntersectionObserver 的懒加载（200px rootMargin）
preview	Boolean	false	启用点击打开大图模态框预览
expires	Number	43200	访问地址缓存 TTL（秒），默认 12 小时

Events

事件名	参数	说明
load	—	图片加载成功时触发
error	Error	重试后仍然加载失败时触发

内部机制

• 通过 resolveRenderableFileUrl 将 fileId/文件路径解析为可渲染 URL
• 加载失败自动重试
• 懒加载基于 IntersectionObserver，rootMargin = 200px
• 预览模式点开后以 NModal 展示原图