Apesar do meu código estar identico ao apresentado na aula as minhas imagens não aparecem no navegador

app.component.html

<ap-photo
url = 'https://external-preview.redd.it/7jotHTAXg5XC56M9EtpTUPzGiwW8Vr1cZkRmudDHdkY.png?width=801&auto=webp&s=02f9fa6ee02c1d7d691890464e957e4efb034d87'
description = 'Chocola'; ></ap-photo>

<ap-photo
url = 'https://yt3.ggpht.com/ytc/AAUvwnhERMC6MhlGq-xPtzqd8CoVZJ_7nG-tHLg25CJKSg=s900-c-k-c0x00ffffff-no-rj'
description = 'Vanilla'></ap-photo>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { PhotoComponent } from './photo/photo.component';

@NgModule({
  declarations: [
    AppComponent,
    PhotoComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

photo.component.ts

import { Component, Input } from "@angular/core";

@Component({
  selector: 'ap-photo',
  templateUrl: 'photo.component.html'
})
export class PhotoComponent {
  //title = 'Neko Girls';
  @Input() description='';
  @Input() url='';
}

photo.component.html

<img class = "img-thumbnail" [src]="url" [alt]="description">

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

}