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

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>内部 a<div>本身放在display: none;：同上，仍然对图像进行 GET 请求

4. 我尝试了是否可以在 CSS 中设置与 img 标签的 src 属性等效的方法？：

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

   但随后https://via.placeholder.com/150和https://via.placeholder.com/200都被加载了。

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

   ---

应用程序：我正在尝试为电子邮件创建一个 1px 跟踪系统，并且我想通过注入自定义 CSS（使用 Stylus chrome 扩展，uBlockOrigin）来防止跟踪我自己的视图

注意：当然，我已经阅读过“display:none”是否会阻止加载图像？但它没有给出这个相关问题的确切解决方案。

Answer 1

Tim Kadlec 在本页上进行了许多测试。

简而言之，图像具有<img>：

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

即使使用以下内容也将始终加载：

#test1 { display:none; }

相反，使用像这样的divwith background-image：

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

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