尝试显示图像“ blocked：other”时出现以下错误

Question

Angular 6 ngBootstrap网站

（已阻止：其他）

better728x90.gif存在于正确的文件夹中，不知道为什么我会收到此错误，并且图像上的其他404也存在。

以下路径正确：

<a href="assets/images/banners/better728x90.gif">
    <img src="assets/images/banners/better728x90.gif" width="728" height="90" class="fit"><br>
</a>

当我在Chrome检查器中检出img元素时，会看到以下内容：

img[src="assets/images/banners/better728x90.gif"] {
    display: none !important;
}

当我使用以下命令将所有图像强制移至display:block时，丢失的图像图标终于显示出来。

:host {
  img {
    display: block !important;
  }
}

---

assets/images/banners/better728x90.gif:1 GET http://localhost:4200/assets/images/banners/better728x90.gif net::ERR_BLOCKED_BY_CLIENT

Answer 1

请注意，AdBlockers 不仅可以根据图片文件的名称（例如：_advertisement.jpg、_ad.jpg、ad-1.jpg 等）来阻止图片加载。我发现 AdBlockers 会根据以下任一情况阻止图片：

• 包含图像文件的目录的名称（例如：/ad、/ad-1 等）。
• 与图像关联的 CSS 类的名称（例如：<img class="ad-img" ...）。

将这些元素重命名为与广告无关的内容解决了问题。