图片消息需解决尺寸控制、加载反馈、交互响应三件事：用容器约束尺寸防撑破气泡；onerror兜底占位图；原生dialog轻量放大并预加载原图。
图片消息在聊天界面里不是插张 <img> 就完事——直接放会撑破气泡、加载失败不显示、缩略图和原图没区分、点击放大又卡顿。核心得解决尺寸控制、加载反馈、交互响应三件事。
图片消息怎么防止撑爆气泡
所有图片必须套一层容器（比如 <div class="msg-image">），再把 <img> 放进去。不能让 <img> 直接当气泡子元素，否则 max-width: 80% 对它无效（<img> 默认是 inline 元素）。
-
<div class="msg-image">设max-width: 80%、overflow: hidden、border-radius: 8px -
<img>设width: 100%、height: auto、display: block（防底部多出空白） - 如果图片宽高比极端（比如 16:9 或 1:10），加
object-fit: cover或contain，别依赖自然缩放
加载失败时怎么兜底
网络抖动或 CORS 问题会让 <img src="xxx"> 变成空白缺口，用户以为发丢了。必须监听 onerror 并 fallback 到占位图或文字提示。
- HTML 里写
<img src="xxx" onerror="this.src='/img/placeholder.png'; this.classList.add('broken')" - CSS 加
.broken { background: #f5f5f5; border: 1px dashed #ccc; }，视觉上可识别 - 更稳妥的做法：用 JS 创建
Image实例预加载，成功后再插入 DOM，失败则渲染错误图标 + “重新加载”按钮
点击图片怎么安全放大预览
别直接用 <dialog> 或第三方库——移动端 <dialog> 兼容性差，而全量引入 lightbox 库又重。用原生 <dialog> + 手动控制最轻量，但要注意两个坑：
立即学习“前端免费学习笔记（深入）”；
- 触发前先确认浏览器支持：
if ('showModal' in HTMLDialogElement.prototype)，不支持就退化为position: fixed模态层 -
<dialog>内的<img>必须设max-width: 90vw和max-height: 80vh，并用object-fit: contain，否则高分辨率图会溢出屏幕 - ESC 关闭后，记得手动
dialog.close()并清除src，避免内存泄漏（尤其在长聊天中反复点图）
缩略图和原图怎么分层加载
大图直接塞进聊天流，首屏卡顿、流量浪费、低端机 OOM。应该默认只加载压缩后的缩略图（比如 320px 宽），点开再拉原图。
- 后端返回消息结构里带两个字段：
thumbnail_url和original_url - 初始渲染用
thumbnail_url，<img>的loading="lazy"属性必须加上 - 点击时，新建
Image实例加载original_url，成功后才替换<dialog>里的src，失败则提示“原图加载失败” - 别在缩略图上直接写
srcset——聊天消息不是响应式图文页，srcset不起作用，还增加解析负担
最容易被忽略的是：图片容器的 border-radius 和气泡本身的圆角必须一致，否则缩略图边缘会露白；还有，iOS Safari 对 <dialog> 的 backdrop 渲染有 bug，得额外加 dialog::backdrop { background: rgba(0,0,0,.7) } 强制生效。
