网页图片显示不出来，八成是 img标签没写对。HTML 里图片不是嵌进网页的文件，而是用 img 标签让浏览器去加载一个外部文件，src 属性就是那个文件的地址。

最基本的写法

<img src="logo.png" alt="公司标志"> 是能跑的最小结构。src 支持相对路径和完整网址；alt 是图片加载失败时显示的替代文字，也是读屏软件念给视障用户听的内容，描述清楚图里是什么就行，别堆关键词。

同一个页面引用多张图时，src 各写各的，alt 一个都不能省，装饰性图片可以给 alt 一个空值，但属性本身要保留。

常用属性

  • width 和 height 控制宽高，写上能避免图片加载时页面跳动。
  • loading=lazy 开启懒加载，屏幕外的图滚动到附近才加载，长页面必备。
  • 样式交给 class 配 CSS 做圆角、边距，比堆内联属性干净。

图片不显示的排查顺序

先按 F12 打开开发者工具看 Network 面板，请求标红就是 404，多半是路径写错：相对路径是相对当前页面算的，页面挪了位置路径就失效。再查文件名大小写，Windows 本地不区分，传到 Linux 服务器就 404。还有一种是图片被 CSS 隐藏或宽高设成了 0，Network 里有请求、页面上却看不见，切到 Elements 面板看计算后的样式。图真不存在时，alt 的文字会显示出来占位。

进阶一点，响应式场景下 srcset 属性很实用：按屏幕宽度让浏览器自己挑不同尺寸的图，省流量也快。注意图床和防盗链：图片路径指到别的域名本身不报错，但开了防盗链的站点会拒绝外站引用，用之前看人家条款。

写法上再补一句：img 是自闭合标签，不需要结束标签配对；格式也要选对，照片用 JPG，图标和透明图用 PNG 或 WebP，体积能小不少。移动端适配时给图片加 max-width:100%，防止撑破容器；从设计稿切图的话，导出 2 倍图再缩着显示，高分屏上不糊。