cum să legi img src în Angular 6 cu TypeScript 4.1.2

Folosesc Angular6 și typeScript4.1.2 și încerc să încarc o imagine din app.component.ts și să o leg în app.component.html, dar imaginea nu apare. Lucrul ciudat este că atunci când încerc să o încarc direct în app.component.html, imaginea este vizibilă. Vă rog să mă ajutați să înțeleg ce lipsește în app.component.ts

app.component.ts :

declare function require(path:string):string;
import { Component } from '@angular/core';

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

export class AppComponent {
  title = 'angular-ui';
  imagesrc = require('../assets/images/myimage.png');
}

app.component.html :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">        
        <img src={{imagesrc}} height="26"/>
        <!-- <img src="../assets/images/myimage.png" height="26"/> -->
      </a>
      Test
    </div>
  </div>
</nav>

Am încercat aproape toate combinațiile pentru a accesa myimage.png în app.component.ts, dar niciuna dintre ele nu a funcționat

imagesrc = require('../assets/images/myimage.png');
imagesrc = require('/assets/images/myimage.png');
imagesrc = require('assets/images/myimage.png');

Am încercat să folosesc și completarea automată, dar Visual Studio Code nu afișează nicio sugestie după ../assets/images/

Și calea pentru resurse este deja setată în Angular.json

"assets": [
          "src/favicon.ico",
          "src/assets"              
],

Răspuns #1

Nu cred că ai nevoie de apelul require. Încearcă să legi calea direct

Controler

export class AppComponent {
  title = 'angular-ui';
  imagesrc = '../assets/images/myimage.png';
}

Șablon

<img [src]="imagesrc" height="26"/>

Răspunsul #2

Acest lucru funcționează întotdeauna

<img [src]="imagesrc" height="26"/>