how to bind img src in angular 6 with TypeScript 4.1.2

Question

I am using Angular6 and typeScript4.1.2 and trying to load image from app.component.ts and binding it in app.component.html but image is not showing up. The strange thing is when I am trying to load it directly in app.component.html the image is visible. Please help me to understand what I am missing in 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>

I have tried almost all the combination to access the myimage.png in app.component.ts but none of these worked

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

I have tried to use autocomplete as well but Visual studio code not showing any suggestion after ../assets/images/

And assets path is already set in Angular.json

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

Barremian · Accepted Answer · 2021-03-05 09:26:04Z

6

I don't think you need the require call. Try to bind the path directly

Controller

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

Template

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

answered Mar 5, 2021 at 9:26

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RK001 · Accepted Answer · 2021-03-05 09:16:32Z

0

This always works

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

answered Mar 5, 2021 at 9:16

RK001

1712 silver badges10 bronze badges

Collectives™ on Stack Overflow

how to bind img src in angular 6 with TypeScript 4.1.2

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related