图片不显示的主因是src路径错误，应以html文件位置为基准写相对路径；alt属性必须填写以保障可访问性；需设置width/height或aspect-ratio预留空间防布局塌陷。
直接用 <img alt="html中怎么插图片_html图片插入方法【步骤】" > 标签，src 属性必须写对路径，否则图片不显示——这是 90% 的问题根源。
图片路径写错：相对路径怎么算
浏览器找图片，是从 HTML 文件所在位置出发算相对路径的，不是从你编辑器打开的文件夹位置。
- 如果
index.html和photo.jpg在同一目录，就写src="photo.jpg" - 如果图片在
images/子目录，就写src="images/photo.jpg"（不是./images/，./多余） - 如果 HTML 在子目录（比如
pages/about.html），要回退一级再进images/，写src="../images/photo.jpg" - 用开发者工具检查 Network 面板里
photo.jpg请求是否 404，这是最准的判断方式
alt 属性不是可选的，是必须填的
不填 alt 不影响显示，但会触发可访问性警告，屏幕阅读器读不出图内容，搜索引擎也难识别图意。
jQuery small2big图片缩放插件
下载
jQuery small2big图片缩放插件，兼容主流浏览器，php中文网推荐下载！ 使用方法： 1、head区域引用文件css和js库 2、在文件中加入html代码， 一个li对应一个图片，images文件夹的图片按数字命名 1.jpg, 2.jpg, ...
- 描述图片实际内容，比如
alt="穿蓝衬衫的程序员在调试代码"，而不是alt="图片1" - 纯装饰图可以写
alt=""（空字符串），但不能省略这个属性 - 某些 CMS 或静态站点生成器会强制校验
alt，漏写会导致构建失败
图片加载失败时页面塌陷怎么办
默认情况下，<img alt="html中怎么插图片_html图片插入方法【步骤】" > 是内联元素，没有宽高时会留出 0×0 空间，加载失败后可能拉乱布局。
立即学习“前端免费学习笔记（深入）”；
- 给
<img alt="html中怎么插图片_html图片插入方法【步骤】" >加width和height属性（HTML 属性，不是 CSS），浏览器能预留空间，避免重排 - 更稳妥的做法是用 CSS 设置
aspect-ratio，比如style="aspect-ratio: 4/3;"，兼容现代浏览器 - 不要依赖
onerror内联事件去 fallback 图片，移动端容易失效；真要 fallback，用 JS 监听error事件并替换src
路径、alt、宽高预留——这三个点卡住绝大多数“插了图却不显示”的情况。尤其是路径，别信编辑器预览，一定要看 Network 里的真实请求地址。
