简单代码如何插入图片

图片显示不出来，简单九成问题出在路径上。代码我见过太多人把代码写得漂漂亮亮，何插结果浏览器里只有一个裂开的入图图标——不是代码错了，是简单图片根本没找着。

先看最基础的代码一行：

<img src="photo.jpg" alt="我的照片">

就这一句，插进去了。何插浏览器读到 <img> 标签，入图就去 src 指定的简单位置抓图片，抓到就渲染，代码抓不到就显示 alt 里的何插文字。简单得不像话对吧？入图但坑全藏在那个 src 里面。

路径，简单路径，代码还是何插路径

假设你的项目文件夹长这样：

my-site/ ├── index.html └── images/ └── cat.jpg

在 index.html 里写 src="cat.jpg"，浏览器会去 my-site/ 根目录找 cat.jpg，找不到。正确的写法是 src="images/cat.jpg"。这行代码的意思是：从当前 HTML 文件所在的位置出发，进入 images 文件夹，找到 cat.jpg。

如果图片在上一级目录呢？用 ../。比如 HTML 在 pages/about.html，图片在 images/logo.png，那就写 src="../images/logo.png"。.. 就是“退回到上一层”。这个逻辑跟命令行里 cd .. 一模一样。

我自己的习惯是：图片永远放在跟 HTML 同级的 images 文件夹里，路径写成 images/xxx.jpg，不给自己找麻烦。

网络图片直接贴地址

本地图片要管路径，网络图片就省事多了：

<img src="https://example.com/photo.png" alt="示例图片">

把网址往 src 里一塞就行。但有两个前提：那个网址得是图片本身的直链，不能是网页地址；对方服务器不能禁止外链。我以前偷懒直接复制某些图床的分享链接，结果页面里全是防盗链的警告图，尴尬得很。

控制大小和加载行为

光插进去不够，图片尺寸失控是另一个常见问题。两种管法：

<img src="images/cat.jpg" alt="猫" width="400"> <img src="images/cat.jpg" alt="猫" style="max-width:100%; height:auto;">

第一种写死宽度 400 像素，简单粗暴。第二种更灵活——图片最大不超过容器宽度，高度按比例缩放。手机上尤其管用，不然一张 2000px 宽的大图能把页面撑爆。

还有个属性叫 loading="lazy"，加上之后图片滚动到可视区域才开始加载。页面图片多的时候，这个属性能省不少流量，首屏也更快：

<img src="images/cat.jpg" alt="猫" loading="lazy">

alt 不是摆设

很多人随手写 alt="" 就完事。图片正常显示时确实看不出区别，但图片加载失败时，alt 的文字就是用户唯一能看到的线索。屏幕阅读器也靠它来告诉视障用户这里有什么。写一句简短的描述，几秒钟的事。

插图片这件事，核心就一个 <img> 标签，一个 src 属性。剩下的全是路径对不对、尺寸控没控、加载策略合不合理的问题。把路径搞明白，八成的图片显示问题就没了。