html - 如何防止 <img src ="url"> 使用 CSS 加载？

Question

假设我有这样一张图片:

<img src="https://via.placeholder.com/150" class="abcd" />

如何仅使用 CSS 制作 url https://via.placeholder.com/150永远不会加载？

我试过:

1. .abcd { display: none; } : 对图像的 GET 仍然完成(您可以检查浏览器的 Developer Tools > Network )

2. .abcd { visibility: hidden; } : 同上

3. 把 <img>在 <div> 里面它本身在 display: none; 中: 同上，图像的 GET 请求仍然完成

4. 我尝试了Is it possible to set the equivalent of a src attribute of an img tag in CSS?中的方法:

   .abcd { content:url("https://via.placeholder.com/200"); }
   

   然后两者都是https://via.placeholder.com/150和 https://via.placeholder.com/200已加载。

5. .abcd { content: none; }也没用

   ---

应用:我正在尝试为电子邮件做一个 1px 跟踪系统，我想通过注入(inject)自定义 CSS(使用 Stylus chrome 扩展，uBlockOrigin)来防止我自己的 View 被跟踪

注意:当然，我已经阅读了Does "display:none" prevent an image from loading?但它并没有给出这个相关问题的确切解决方案。

Answer 1

Tim Kadlec 在 this page 上完成了许多测试.

简而言之，图像带有 <img> :

<div id="test1"><img src="images/test1.png" alt="" /></div>

即使在以下情况下也会始终加载:

#test1 { display:none; }

相反，使用 div与 background-image像这样:

<div id="test1"><div style="background-image: url('https://via.placeholder.com/159');"></div></div>

将允许在使用 #test1 { display:none; } 时不加载图像.