用插入图片需确保src路径正确（优先相对路径）、alt描述准确必要、onerror处理加载失败、srcset/sizes实现响应式，四者缺一不可。
用 <img alt="HTML中如何将一张图片放进来" > 标签插入图片，src 属性必须写对
浏览器不会自动猜路径，src 写错就只显示一个断裂图标。常见错误是把本地文件路径（比如 C:\xxx\logo.png）直接贴进去，或者漏掉 ./、/ 前缀导致相对路径失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
src值优先用相对路径：图片和 HTML 在同一目录，就写src="logo.png"；在子目录images/下，就写src="images/logo.png" - 绝对路径以
/开头（从网站根目录算起），不是从硬盘根目录；http://或https://开头的才是完整 URL - 确保文件名大小写完全一致——Linux 服务器区分大小写，
Logo.PNG和logo.png是两个文件
alt 属性不是可选的，而是必要且影响体验的
不写 alt，屏幕阅读器读不出图内容，搜索引擎也难理解图意，还可能被审计工具标为可访问性问题。空字符串 alt="" 是合法的，但只适用于纯装饰图（比如背景分割线）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 信息图、按钮图标、数据图表等，用简短准确的文字描述功能或内容，比如
alt="提交表单按钮" - 避免写 “图片”、“一张图” 这类无效词；也不要用关键词堆砌
- 如果图里有文字（比如流程图中的标注），
alt应包含这些文字，而不是绕开它
加载失败时怎么知道？用 onerror 或 CSS fallback
网络中断、路径改名、CORS 限制都可能导致图片加载失败，但页面默认不报错也不提示，用户只能看到空白或断裂图标。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 简单 fallback：加
onerror="this.style.display='none'"隐藏坏图，或换成占位文字：onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRleHQgeD0iNSIgeT0iMTUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiI+NDQ8L3RleHQ+PC9zdmc+'" - CSS 方式更干净：用
background-image+:has()（新特性，兼容性有限）或伪元素配合 JS 检测，但不如原生<img alt="HTML中如何将一张图片放进来" >语义清晰 - 服务端日志或前端监控可捕获
error事件，但需主动监听：document.querySelector('img').addEventListener('error', ...)
响应式图片别只靠 CSS width，用 srcset 和 sizes 更靠谱
单纯用 style="width: 100%" 或 max-width: 100% 只是缩放渲染尺寸，浏览器仍会下载原图——大屏手机下加载 4K 图再缩到 400px 宽，浪费流量又拖慢首屏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 提供多尺寸源：用
srcset列出不同宽度的图，如srcset="logo-400w.png 400w, logo-800w.png 800w"，再配sizes="(max-width: 600px) 100vw, 50vw"告诉浏览器在什么条件下用哪个 -
src仍是必填项，作为兜底；现代浏览器按需下载，不支持的浏览器退回到src - 工具链能帮大忙：Webpack 的
responsive-loader、Vite 插件或构建后生成srcset的脚本，比手写安全得多
src 和 srcset 混用时，容易只改了其中一个而忘了同步更新，上线后查半天才发现是资源没跟上。 
