iter(g16): image 加载失败占位

packages/skin/ui/src/image.ts

@@ -1,10 +1,10 @@
 import { h } from '@ui-arch/frame';
 import type { ImageProps } from './types.js';
 
-/*** 图片：缩略图展示，点击 / 回车打开遮罩大图预览（Esc 或点击遮罩关闭），样式只消费 --ua-* 令牌 ***/
+/*** 图片：缩略图展示，点击 / 回车打开遮罩大图预览（Esc 或点击遮罩关闭），加载失败自动落占位；样式只消费 --ua-* 令牌 ***/
 export function image(props: ImageProps): HTMLElement {
   const style = props.width ? `width:${props.width}px` : '';
-  return h('img', {
+  const img = h('img', {
     class: 'ua-image',
     src: props.src,
     alt: props.alt ?? '',
@@ -15,6 +15,11 @@ export function image(props: ImageProps): HTMLElement {
     onclick: () => openViewer(props.src, props.alt),
     onkeydown: (e: KeyboardEvent) => e.key === 'Enter' && openViewer(props.src, props.alt),
   });
+  img.addEventListener('error', () => {
+    const box = h('span', { class: 'ua-image-fallback', style, role: 'img', 'aria-label': props.fallback ?? '图片加载失败' }, props.fallback ?? '图片加载失败');
+    img.replaceWith(box); // 失败兜底：整块替换，避免残留破图图标
+  });
+  return img;
 }
 
 /*** 打开全屏遮罩预览层；关闭时自清理、解绑键盘并归还焦点 ***/

packages/skin/ui/src/types.ts

@@ -250,9 +250,10 @@ export interface TagProps {
 
 /*** 图片入参 ***/
 export interface ImageProps {
-  src: string;    // 图片地址（缩略图与大图共用）
-  alt?: string;   // 替代文本；缺省空串
-  width?: number; // 缩略图宽度像素，高度自适应；缺省走样式默认
+  src: string;      // 图片地址（缩略图与大图共用）
+  alt?: string;     // 替代文本；缺省空串
+  width?: number;   // 缩略图宽度像素，高度自适应；缺省走样式默认
+  fallback?: string; // 加载失败占位文案；缺省「图片加载失败」
 }
 
 /*** 提示条入参 ***/