13

Angular 6 ngBootstrap website

enter image description here

(blocked:other)

The better728x90.gif exists in the correct folder, not sure why I'm gettin this error and other 404s on images that do exist.

The following path is correct:

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

When I check out the img element in the chrome inspector I see this:

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

When I force all images to display:block with the following, the missing image icon finally shows up.

: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
Leon Gaban
  • 32,429
  • 98
  • 305
  • 502

2 Answers2

36

AH! It was my adBlocker!

I am getting Failed to load resource: net::ERR_BLOCKED_BY_CLIENT with Google chrome

I paused it on my local host and now the images are showing up.

Leon Gaban
  • 32,429
  • 98
  • 305
  • 502
  • 1
    Ditto! I was asked about a similar issue by my manager we had some segment.io calls being clocked. – A-Dubb May 20 '19 at 21:03
  • 1
    why does this occur? Are image extensions considered ads and from when? Any further details would be welcome – Eugen Sunic Dec 29 '19 at 17:23
0

Note that AdBlockers can block images from loading based not just on the name of the image file (e.g.: _advertisement.jpg, _ad.jpg, ad-1.jpg etc.). I have found that AdBlockers will block images based on any of the following:

  • The name of the directory containing the image file (e.g.: /ad, /ad-1, etc.).
  • The name of the CSS class associated with the image (e.g.: <img class="ad-img" ...).

Renaming these elements to something that did not associate them with advertising fixed the issue.

David Wilkins
  • 1
  • 1