Can Angular serve images outside assets folder

Question

Am building a project on Angular and this project will have lots of images as part the design. Am wondering if it is possible to keep images used by each component within the component instead of having to fetch each image from the assets folder.

I want to know if it is possible to configure Angular to house and serve images used by a component within that component.

See picture for clarification:

Answer 1

Assets Contains image files and other asset files to be copied as-is when you build your application.

But Yes, you can!

But for this you need to manually require each image in your component file and use dyanmically in template like this -

declare var require: any
myImage = require('./myImage.png');

<img [src]="myImage" />

As by default Angular CLI has a configuration for static data such as Images/Fonts/Css files etc from assets folder.

But if you want to use some static data outside from there you need to require like above mentioned.

PS: Not sure whether angular takes all static data at the time of build such as image at the component level. But should work in ng serve