hur man binder img src i angular 6 med TypeScript 4.1.2

Jag använder Angular6 och TypeScript4.1.2 och försöker ladda en bild från app.component.ts och binda den i app.component.html, men bilden visas inte. Det konstiga är att när jag försöker ladda den direkt i app.component.html syns bilden. Snälla hjälp mig att förstå vad jag saknar i 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>

Jag har försökt nästan alla kombinationer för att komma åt myimage.png i app.component.ts men ingen av dem fungerade

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

Jag har försökt använda autokomplettering också, men Visual Studio Code visar inga förslag efter ../assets/images/

Och sökvägen till resurser är redan inställd i Angular.json

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

Svar #1

Jag tror inte att du behöver require-anropet. Försök binda sökvägen direkt

Kontroller

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

Mall

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

Svar #2

Det här fungerar alltid

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