如何防止CSS加载<img src =“ url”>？

Question

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

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

如何仅使用CSS来确保从未加载网址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跟踪系统，并且我想通过注入自定义CSS（具有Stylus chrome扩展名，uBlockOrigin）来防止跟踪自己的视图

注意：当然，我已经读过Does "display:none" prevent an image from loading?，但是它没有为该链接问题提供确切的解决方案。

Answer 1

  

应用程序：我正在尝试为电子邮件创建一个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" />

Answer 2

蒂姆·卡德莱克（Tim Kadlec）对docx2txt进行了许多测试。

简而言之，带有<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; }时不加载图像。