包含没有 src 的图像的有效方法是什么？

Question

我有一张图片，稍后我将使用 javascript 动态填充 src，但为了方便起见，我希望图片标签在页面加载时存在，但不显示任何内容。我知道 <img src='' /> 无效，那么最好的方法是什么？

原文由 jhchen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

虽然没有有效的方法来省略图像的来源，但 有些 来源不会导致服务器命中。我最近遇到了与 iframe 类似的问题，并确定 //:0 是最佳选择。不完全是！

以 // （省略协议）会导致使用当前页面的协议，防止 HTTPS 页面中出现“不安全内容”警告。跳过主机名不是必需的，但会使其更短。最后，端口 :0 确保无法发出服务器请求（根据规范，它不是有效端口）。

这是我发现的唯一一个在任何浏览器中都没有导致服务器命中或错误消息的 URL。通常的选择 — javascript:void(0) 如果在通过 HTTPS 提供的页面上使用，将在 IE7 中导致“不安全内容”警告。任何其他端口都会导致尝试连接服务器，即使是无效地址也是如此。 （一些浏览器会简单地发出无效请求并等待它们超时。）

这在 Chrome、Safari 5、FF 3.6 和 IE 6/7/8 中进行了测试，但我希望它可以在任何浏览器中工作，因为它应该是杀死任何尝试请求的网络层。

原文由 Ben Blank 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我知道这可能不是您正在寻找的解决方案，但它可能有助于事先向用户显示图像的大小。同样，我并不完全理解最终目标，但这个网站可能会有所帮助： https ://via.placeholder.com

它很容易使用，并允许显示所需大小的空图像。同样，我知道您不想展示任何内容，但这也可能是一个优雅的解决方案。

  <img src="https://via.placeholder.com/300" style='width: 100%;' />

原文由 DetectiveFalcon 发布，翻译遵循 CC BY-SA 4.0 许可协议