使用 require 在 Angular 11 应用程序中加载图像

Question

I was trying to load some images in an Angular 11 app in the traditional way by adding <img src="../xxx/yyy" into Html but it returned 404 error . (I'm sure that the path is OK). Afterwards, I tried the require solution but it failed again. This is the way I'm using require. Any ideas-solutions?

Typescript

declare var require: any;
imgname= require("../../assets/images/Component95_1.png").default; 

Html

<img src={{imgname}}>

Answer 1

You need to create an assets directory in src . With full path you can get the image. example

I recommend to set src via input directive: <img [src]="imgname">