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

Question

假设我有一个这样的图像：

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

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

我试过了：

.abcd { display: none; }：对

1. 图像的GET仍然完成(您可以使用浏览器的Developer Tools > Network检查(

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

3. 将<img>放入本身在display: none;中的<div>中：同上，仍然对图像执行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; }

相反，使用具有如下background-image的div：

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

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

Answer 2

应用程序：我正在尝试为电子邮件做一个 1px 跟踪系统，我想通过注入自定义 CSS(带有 Stylus chrome 扩展名，uBlockOrigin(来防止跟踪我自己的视图

为什么你不做相反的事情，默认情况下不加载图像，然后在需要时加载它。

这是一个使用 CSS 变量的想法

img {
content:var(--img);
}
/* The CSS to disable the loading
img {
--img:initial!important;
}
*/

<img style="--img:url('https://via.placeholder.com/150')" class="abcd" />

另一个没有CSS变量的想法，默认情况下将加载图像。确保尽早加载 CSS 以避免加载。

/*to disable the loading. Make sure it's considered before the inline style
img {
content: none!important;
}
*/

<img style="content:url('https://via.placeholder.com/150')" class="abcd" />