Angular 4-模板URL从https更改为http？

Question

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 1

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>