fix(aiot): 告警截图 Image 组件添加 fallback 兜底显示
列表缩略图和详情弹窗的 Image 组件均添加 fallback SVG, 当图片 URL 无效或加载失败时显示友好占位符而非损坏图标。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user