html中url怎么添加图片

浏览器不会自动去猜你硬盘里的添加图片图片在哪。`` 标签的添加图片 `src` 属性必须拿到一个确切地址，它才能把图拽进页面里。添加图片这个地址，添加图片就是添加图片 URL。

先看最直接的添加图片一种写法。假设你的添加图片 HTML 文件和一张叫 `dog.jpg` 的图片放在同一个文件夹里，那 URL 只需要写文件名：

```html ```

打开页面，图就出来了。添加图片浏览器拿到 `dog.jpg` 这个相对路径，添加图片会以当前 HTML 文件所在的添加图片位置为起点去找。同目录下没有，添加图片就报 404，添加图片图片位置显示一个裂开的添加图片图标。这种情况我见过太多次，添加图片多半是文件名拼错了，比如把 `dog.jpg` 写成了 `Dog.JPG`——服务器区分大小写，差一个字母都不行。

如果图片放在子文件夹里呢。比如 HTML 在根目录，图片在 `images` 文件夹下，文件名是 `cat.png`。URL 写成这样：

```html ```

斜杠表示进入下一层目录。反过来，如果 HTML 在子文件夹里，图片在上一层，就用 `../` 退回一级：

```html ```

`../` 可以连着用，`../../` 就是退两级。这种相对路径的好处是，整个项目文件夹搬到别的服务器上，只要内部结构不变，图片照样能显示。我习惯在本地开发时用相对路径，省事。

还有一种情况：图片不在你的项目里，在别人的服务器上。那就得写完整的绝对 URL，带上协议和域名：

```html ```

这种写法能直接引用外部图片，但有个坑——对方网站如果删了图、改了路径，或者禁止外链，你的页面就空了。更糟的是，如果对方换了张内容完全不同的图放在同一个 URL 上，你这边显示的东西就失控了。所以外部图片能下载到自己服务器上，就尽量下载。

有人会问，那绝对路径能不能写自己网站？可以。比如 `https://mysite.com/images/header.png`。但本地开发时用绝对路径会很麻烦，因为本地没有 `mysite.com` 这个域名，预览时图片全挂。所以开发阶段用相对路径，上线后再看情况调整。

还有一点容易忽略：URL 里的空格和中文。比如图片叫 `my photo.jpg`，中间有空格。直接写 `` 某些浏览器能容错，但不保证。规范做法是把空格换成 `%20`，或者干脆用下划线、连字符代替空格。中文文件名也类似，虽然现代浏览器大多能处理，但服务器端编码不一致时就会出乱子。我自己的习惯是文件名全用英文小写加连字符，比如 `my-photo.jpg`，省掉一堆麻烦。

另外，`src` 里写的是 URL，不是文件在电脑上的完整路径。有人直接把 `C:\Users\me\Desktop\pic.png` 塞进去，这在本地打开 HTML 文件时可能碰巧能显示，但一放到服务器上就彻底失效。服务器上的文件系统跟你的 Windows 电脑不是一回事。URL 要写的是相对于网站根目录或者当前文档的路径，不是操作系统里的绝对路径。

最后提一个实际中常见的场景。你用 CSS 给元素加背景图，URL 的写法跟 `` 的 `src` 逻辑一样，但路径的基准点变成了 CSS 文件所在的位置，不是 HTML 文件的位置。比如 CSS 在 `css/style.css`，背景图在 `images/bg.png`，那 CSS 里要写 `url('../images/bg.png')`。这个基准点的差异，坑过不少人。

图片不显示的时候，打开浏览器开发者工具，看 Network 面板里那条图片请求的状态码。404 就是路径错了，403 多半是权限或防盗链，200 但图不显示，可能是图片本身损坏或者格式浏览器不支持。查 URL 问题，这个面板比盯着代码猜快得多。