将 图像 src 属性 设置 为 # ：

<img data-src="img/portfolio-desktop1-small.png"
   src="#" alt="Thumbnail">

中 的 每 一 个
HTML 很 好 地 通过 了 W3C 验证 器 ， 现代 浏览 器 知道 不要 试图 加载 不 存在 的 图像 。 *
相比 之 下 ， 使用 引用 不 存在 文件 的 src 值 会 导致 不 必要 的 HTTP 请求 和 错误 ：

<img data-src="img/portfolio-desktop1-small.png"
   src="bogus.png" alt="Thumbnail">

格式
无法 加载 资源 ：服务 器 上 没有 找到 请求 的 URL 。

• 注意 ： * 我 读 到 了 关于 浏览 器 如何 处理 # 的 相互 矛盾 的 信息 。 如果 有人 有 确切 的 信息 ， 请 添加 评论 。 *

另 请 参阅 * sidehowbarker * 关于 action 属性 的 相关 回答 ：
https://stackoverflow.com/a/32491636 的 最 大 值

# # # 更新 ：* 二 〇 二二 年 十一 月 *

看 起来 src="#" 技巧 曾经 是 一 个 不错 的 解决 方案 ， 但 现在 把 它 发送 到 浏览 器 已经 不是 一 个 好 主意 了 。 所以 ， 我 创建 了 一 个 构建 工具 ， 将 源 HTML 中 出现 的 src="#" 转换 为 适合 浏览 器 的 一 个 微小 的 不可 见 的 单 像素 SVG 的 内联 data URLs 。

• • 构建 工具 img-src-placeholder ： * *

https://github.com/center-key/img-src-placeholder （ MIT 许可 证 ）
有趣 的 是 ：

const onePixelSvg =
   '<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"></svg>';
const dataImage = 'data:image/svg+xml;base64,' +
   Buffer.from(onePixelSvg).toString('base64');
html.replace(/src=["']?#["']?/gm, `src="${dataImage}"`);

格式
生成 的 HTML 将 具有 <img> 标记 ， 如下 所 示 ：

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiPjwvc3ZnPg=="
   alt=avatar>

格式
使用 建置 工具 的 优点 在于 ：
1.源 保持 整洁

1. HTML 始终 验证
   1.内联 数据 URL 可 防止 浏览 器 发出 不 必要 且 无效 的 网络 请求

如果 你 只是 删除 src 属性 ， 然后 在 需要 的 时候 添加 它 ， 会 发生 什么 ？ src 属性 不是 必需 的 。 在 我 看来 ， 我 不会 担心 w3c 验证 工具 会 说 什么 。 只要 你 在 必要 的 浏览 器 中 测试 它 ， 它 就 能 工作 。

**2021年1月更新。**src="#”技巧现在在https://www.w3.org/TR/html-media-capture/的验证器上有效

如果有人还在寻找答案，那么src="/"代码会解决w3c验证器的抱怨，并且不会像带有#字符的解决方案那样产生额外的请求。