Menu
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:
449
Upload the simple image you need to create an application using the command " ng new my-app". You have to open your HTML component and then use the image tag and put the image with a name or with their proper path, such as: <img src=” ../../assets/images/image.
Keep an assets folder that contains top-level CSS, images, and font files. In react best practices we keep an assets folder inside the src which may contain top-level CSS, images, and font files.
The Angular application has a default assets folder. By default, whatever you put in the assets folder you can access it directly from the browser and queried through an HTTP request. You can create your own folder like assets by adding that folder to the assets section in the angular. json file.
The Angular-cli places all files in the /dist directory. The public folder is for public assets and the content is copied to the /dist folder.
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
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
