Чтобы отобразить изображение из массива

Я пытаюсь отобразить изображение из массива, содержащего 2 переменные с именами img и value. Я могу отображать value, но не img (i, e изображение), как показано на изображении ниже:

что не так в шаблоне ??.

Ниже приведен код

HTML

   <div class = "container" *ngFor = "let dog of dogs">

        <div class = "section">
            <p id = "name">Dogs:</p>
            <img   class = "dog-img"  src = "{{dog.image }}" >
            <span>{{dog.value }}</span>         
        </div>

</div>

TS

   import { Component, OnInit, VERSION, ViewChild } from '@angular/core';
   export interface IDogs {
      img: string;
      value: string;
     }

   @Component({
    selector: 'app-selection-list',
    templateUrl: './selection-list.component.html',
     styleUrls: ['./selection-list.component.css']
     })

  export class SelectionListComponent{

  public dogs: IDogs[] =
    [
     {
       img:'https://material.angular.io/assets/img/examples/shiba2.jpg',
       value:'dog1',
     },
    {
      img:'https://material.angular.io/assets/img/examples/shiba2.jpg',
      value:'dog2',
     },
   ];

}