All language subtitles for 4. Adding Static Files to Angular

OK.

So there's definitely two outstanding things we have to do.

Like I mentioned we have to make sure we reference an actual image inside of our image tag.

We also have to add in some custom CSX to limit the width of this big old cart.

Let's first take care of adding in some images to our project.

Now in general in an angular project there are two different ways we can make use of images.

We can either refer to images that are hosted out on some remote server online or we can include some

static image files inside of our project.

But this application we're going to make use of some static image files so that you understand how to

include static resources like say images or sounds inside of an angular project though attached to this

lecture as a resource.

You're going to find a little zip file called something like cards 0 0 4 images dot zip to make sure

you pause this video right now go to the resources attached to this video and find this little zip file

and download it.

Once you download this file go ahead and unzip it and then inside there you're going to find three different

images.

One is of a tree.

One is of mountains and one is of biking.

These are the three static images that we want to use for our application for each of these different

cards.

We need to figure out how to add those images into our project so we can refer to them inside of our

HMO files okay.

I'm gonna flip over to my code.

Ed inside of my SRT directory we'll find a folder inside of here called assets.

Any file that you put inside this assets directory is going to be made available to the rest of your

angular application.

We can put inside this assets directory things like raw JavaScript files or images or audio or Ross

the SS files just about anything that you want to make directly available to your application.

We're going to take our three images and put them into that directory that will then allow us to directly

reference them from the different image tags we put into our application though to open up that directory.

If you're using Visual Studio code you can right click on assets and then you'll see something like

reveal in finder if you're using Windows.

I think the term might be slightly different but essentially we want to open up that assets directory

inside of a folder explorer look here's my assets directory I'm gonna open that folder up and then go

in to find the images that I just downloaded and I'm going to drag and drop those three images into

the assets directory

now that I've moved those images over I should see them inside the assets folder inside my code editor.

So now that these files are included inside my project we can refer to them directly from Image tags

where if we were making use of audio elements week or year audio files we can create some audio elements

where if we had some raw javascript we can make script tags and refer to them as well but to refer to

a file inside of our assets directory in the source property of the image right here we'll say assets.

So that looks at the assets folder flash and then the file that we want to get the car that we're working

on right now is trying to show the tree card we'll get our tree dot JPEG image in here.

It's all right out inside that image source tree dot JPEG.

Notice that it's JP e.g. not just JP.

So make sure you get the full extension on their.

Now we save this file.

You can flip back over to our browser and we'll see a gigantic tree up here.

We scroll down.

We still see the rest of the card.

So we've now kind of fixed up issue number one.

You can show an actual image or a static image inside of application.

We still have to add in some customers.

Yes yes.

To limit the width of this card so it doesn't show up quite so large though.

Quick pause right here.

We'll figure out the CSF side in just a moment.