fix(aiot): 告警截图 Image 组件添加 fallback 兜底显示

列表缩略图和详情弹窗的 Image 组件均添加 fallback SVG,
当图片 URL 无效或加载失败时显示友好占位符而非损坏图标。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-02 14:21:13 +08:00
parent b9d146c58f
commit c7afa34f03

View File

@@ -252,6 +252,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
:width="40"
:height="40"
:preview="{ src: row.ossUrl || row.snapshotUrl }"
:fallback="`data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect width='40' height='40' fill='%23f0f0f0'/><text x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23bbb' font-size='12'>-</text></svg>`"
style="object-fit: cover; border-radius: 4px; cursor: pointer"
/>
<span v-else class="text-gray-400">-</span>
@@ -356,6 +357,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
:src="currentAlert.ossUrl || currentAlert.snapshotUrl"
:width="300"
:preview="{ src: currentAlert.ossUrl || currentAlert.snapshotUrl }"
:fallback="`data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='200'><rect width='300' height='200' fill='%23f5f5f5'/><text x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23bbb' font-size='14'>图片加载失败</text></svg>`"
/>
</div>
<div class="mt-1">