How do I specify external assets in Angular?

Question

In Angular, the location of assets have to be specified in angular.json. Ie:

"assets": [ "src/favicon.ico", "src/assets", "src/app/home/assets/img" ],

I have to use images that do not reside on Angular: Ie:

https://thehill.com/wp-content/uploads/sites/2/2022/05/cropped-favicon.png?w=180

the call from Angular is like so:

<div class="col-12 d-flex justify-content-center align-items-center col-xs-12 col-sm-6 col-md-4 col-lg-3 mb-4"
    *ngFor="let site of category.sites">
    <a class="card-link" href="#">
       <h6 class="text-muted d-flex justify-content-center mb-2" style="font-size: 20px;">
      {{site.url}}
       </h6>
       <img class="img-fluid news-logo" src="{{site.img}}">
    </a> 
</div>

Angular is not displaying the images. I am supposing it is because the location is not registered in angular.json as an asset. How do I handle this?

Answer 1

You can directly use the external url in the img tag inside of your component html file:

<img src="https://thehill.com/wp-content/uploads/sites/2/2022/05/cropped-favicon.png?w=180" >

Demo here