Bryan Green Bryan Green - 1 year ago 87
Javascript Question

Angular 4 - Template URLs Changing from https to http?

I have a template in my Angular 4 app that pulls images from an https:// URL, and works fine when the app is hosted locally via 'ng serve':

<div class="poster_div" *ngIf="movie_details['poster_path']">
<img src="https://image.tmdb.org/t/p/w185{{movie_details['poster_path']}}" />
</div>


However-- now that I've deployed the site ( and am serving it with Apache HTTP), these images are being pulled from http instead (causing the dreaded 'mixed content' error in the browser). Is there a setting in 'ng build' that causes this? Or is is some wacky side effect with Apache?

'Inspect Element' from local:

<img _ngcontent-c1="" src="https://image.tmdb.org/t/p/w185/ApYhuwBWzl29Oxe9JJsgL7qILbD.jpg">


'Inspect Element' from remote site:

<img _ngcontent-c1="" src="http://image.tmdb.org/t/p/w185/ApYhuwBWzl29Oxe9JJsgL7qILbD.jpg">

Answer Source

Remove the protocol from your image URL, so you have a relative URL. This will then use the correct protocol that the visitor is using when visiting the site.

<div class="poster_div" *ngIf="movie_details['poster_path']">
  <img src="//image.tmdb.org/t/p/w185{{movie_details['poster_path']}}" />
</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download