Adding an image to the welcome page

Before moving on to creating the database, let’s make a quick pitstop and add an image to our welcome page to make a better first impression when a user visits our site for the first time.

Download the image

The first thing you need to do is download the image we are going to use on the Welcome page. Click the Download button below to download the home.png image to your downloads folder.

Create the images folder

Create a new folder called images in the FredsCars/src/assets folder and add the home.jpg file to the new images folder by right clicking on the FredsCars/src/assets/images folder and selecting Add --> Existing Item....

In the Add Existing Item dialogue, navigate to your downloads folder, select the home.png file and click the Add button.

home.png will now be part of your project and you can see it in Solution Explorer.

Modify the Welcome components HTML.

Open the welcome.component.html file and modify it with the contents below.

FredsCars/src/app/welcome/welcome.component.html

<h1>Welcome to Fred's Cars!</h1>
Where you'll always find the right car, truck, or jeep.
Thank you for visiting our site.

<div class="home-image">
  <img src="assets/images/home.png" />
</div>

In the html above, we have added a DIV element with a nested IMG element. Run the application in debug mode and your browser should look similar to the following screenshot.

Improve the Welcome image with CSS

Putting an image on the Weclome page definately improved the appearance. But we can make it even better. In the html above we included a class called “home-image” on the new DIV tag. We can use this to target the image’s DIV parent and dress it up a bit.

Open the welcome.component.scss file and add the following css.

FredsCars/src/app/welcome/welcome.component.scss

.home-image {
  text-align: center;
  background-color: black;
  margin-top: 40px;
  padding: 0px
}

In the CSS above, we are centering the image, making the background color of the image’s parent DIV element black, adding a margin of 40 pixels to the top to give it some space from the Welcome message, and removing the padding to give it a sleeker look.

Now the Welcome page of the application should look like the following screenshot.

Ah, that’s better. Now the appearance of our application’s Welcome page is much improved.

What’s Next

In this module we created an image folder in the Angular application’s src/assets folder and used the first image of the application, a very simple task compared to some of the awesome features we have implemented in earlier modules. But it was a much needed improvement.

In the next module we will continue on and create the database with Entity Framework Core.