BoosAPI/desktop/libs/markstream-vue/docs/zh/guide/image-node.md

ImageNode — 自定义图片预览

ImageNode 在内部渲染图片并在用户交互时发出事件。我们为图片点击暴露了一个事件，因此你可以接手点击行为（例如打开自定义图片预览/Lightbox），而无需替换整个渲染器。

• 事件：click — 当用户在成功加载的图片上触发点击时发出。负载形如 [Event, string]，其中第二项为最终用于渲染的图片 URL（可能是 fallback）。
• 事件：load / error — 图片加载成功或失败事件，负载为图片 src。

示例：创建一个包装组件来拦截 click 事件，并在 VitePress 中注册它作为自定义组件。

1. CustomImageNode.vue（包装原始 ImageNode，拦截点击并在新标签打开图片作为简易预览）：

<script setup lang="ts">
import { ImageNode } from 'markstream-vue'

const emit = defineEmits(['load', 'error', 'click'])

function onImageClick(payload: [Event, string]) {
  const [, src] = payload
  // 简单示例：在新标签页打开图片用于预览
  // 在真实项目中可替换为 modal/lightbox 组件
  window.open(src, '_blank')
  // 仍然向外暴露 click 事件，供上层处理
  emit('click', payload)
}
</script>

<template>
  <ImageNode v-bind="$attrs" @load="emit('load', $event)" @error="emit('error', $event)" @click="onImageClick" />
</template>

2. 在 VitePress 主题增强（docs/.vitepress/theme/index.ts 的 enhanceApp）中注册自定义组件：

import type { App, Component } from 'vue'
import { setCustomComponents } from 'markstream-vue'
// docs/.vitepress/theme/index.ts
declare const CustomImageNode: Component

export default ({ app }: { app: App }) => {
  // setCustomComponents 接受一个 id（任意字符串，用于区分不同注册）和组件映射
  // 通过这种方式，库在渲染 ImageNode 时会使用你提供的组件
  setCustomComponents('vitepress-image-preview', { image: CustomImageNode })
}

可选建议：

• 若希望更丰富的预览体验（缩放、手势、幻灯片），可在 onImageClick 中调用诸如 photoswipe、fslightbox 等库，或使用应用级 modal 管理预览状态。

说明小结：

• ImageNode 提供的 click 事件是接管自定义预览的入口；常见做法是用一个包装组件替换默认实现并通过 setCustomComponents 注册到 VitePress/客户端应用中。
• 包装组件也可以复用 load / error 事件，或在内部实现更多逻辑（统计、懒加载补偿、占位符策略等）。