To add an image, just drag the image you want to use to the section where you want to place it. If you're not in edit mode already, click Edit at the top right of the page. The easiest way to add or replace an image on your page is to simply drag or paste.ĭrag to add a new image or replace an existing image Now it's just referencing from within the dist folder.Replace an existing image by dragging or pasting Add or replace an image on your page Our entire assets folder has been moved over to the dist folder now! The path will also work since we referenced it from within the src folder. Let's try building this application now and seeing what the Angular CLI does. You can see the other colors on the Bulma docs and select whichever you like!Īngular CLI Moves Images to dist on build We'll just add the is-dark class to the : Let's also change the color of our header to be a darker color. Now we can reference this image in our 'app-header', Go ahead and save that to our assets folder inside of an img folder. Let's go grab the Angular logo from angular.io. The assets folder that the Angular CLI generated for us is the perfect place to use for storing images. It will do the same when it sees that there are images inside the assets folder.Īll we have to do is reference these images in our templates with a path that starts inside the src folder.įor instance, if we have an image at src/assets/img/logo.png, we would add this to our template: template: ` Remember when we used the npm run build or ng build -prod command? Angular CLI moved all of our assets into the dist folder. Less round trips means better performance (and Google PageSpeed score). It's also a better idea to store this within our project folder so that all assets are served from our same domain. This won't be good long term because if Bulma ever decided to change that URL, then our app's logo would stop working. It's also an image link that points to a separate domain ( ). We currently have the default Bulma logo in our header.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |