title: Getting the following error while trying to display image "blocked:other"
body: <p><strong>Angular 6 ngBootstrap website</strong></p>
  
  <p><a href="https://i.stack.imgur.com/i4ULk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/i4ULk.png" alt="enter image description here"></a></p>
  
  <p>(blocked:other)</p>
  
  <p>The <code>better728x90.gif</code> exists in the correct folder, not sure why I'm gettin this error and other 404s on images that do exist.</p>
  
  <p>The following path is correct:</p>
  
  <pre><code>&lt;a href="assets/images/banners/better728x90.gif"&gt;
      &lt;img src="assets/images/banners/better728x90.gif" width="728" height="90" class="fit"&gt;&lt;br&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>When I check out the img element in the chrome inspector I see this:</p>
  
  <pre><code>img[src="assets/images/banners/better728x90.gif"] {
      display: none !important;
  }
  </code></pre>
  
  <p>When I force all images to <code>display:block</code> with the following, the missing image icon finally shows up.</p>
  
  <pre><code>:host {
    img {
      display: block !important;
    }
  }
  </code></pre>
  
  <hr>
  
  <pre><code>assets/images/banners/better728x90.gif:1 GET http://localhost:4200/assets/images/banners/better728x90.gif net::ERR_BLOCKED_BY_CLIENT
  </code></pre>