We're now able to configure our image detail component based upon some prop that is passed in.
So now we need to figure out how we can also show an image inside of here as well.
Also depending upon some configuration option or prop.
Now hopefully right before this video you saw another lecture where there is a images dot zip file.
So here is that file I have right here.
If you didn't download this file please pause this video.
Go back to the previous lecture and download that zip.
This has three different images that we're going to want to show inside of our component.
All right.
So I'm going to extract this file I just double clicking on it.
If you're on Mac OS if you're on Windows you can double click on it and then hit extract here once we
have that folder.
We're then going to open it up in drag and drop all three of those images into the assets directory
of our project.
This assets directory right here is where we put any static content.
So like images that don't change we want to use inside of our application.
So I'm going to open up that folder
years my assets folder and I'll drag and drop beach or E and mountain inside there all right now all
closed assets.
And that other folder.
So now inside of your code editor you should be able to open up that assets directory and see beech
forest mountain OK.
So like I said we now want to make sure that we can show an image inside of our image detail.
We're going to eventually want to customize exactly which image we show.
But for right now let's just hard code exactly one image that will be shown inside of all copies of
image detail just we can first figure out how to show an image and then later on we will fix it up to
accept this.
Which image to show as a prop instead OK.
So to get started inside of my image detail file I can go to my import statement up here and I'm going
to import a new primitive component called image then inside of my component itself.
I'm going to wrap the existing text with a view element as well as usual don't forget to clean up that
semicolon at the end of text then right above it.
I'm going to place a copy of the image element.
This is another self closing element.
So we're gonna use a self closing tag then to specify what image we want to show we're going to pass
in an S Sumi source property in the browser you might be used to using image elements with a S R C property
with React Native.
It's the full word source instead than inside of here.
We're going to pass a required statement this requires statement is going to provide a path to the image
that we want to show.
It's very much like our import statements we've written is going to be a relative path.
So we need to make sure we provide a relative path from our image.
Detail.
That's a file that we're in right now up into the assets directory and then select one of these three
different pictures so to get over there we're gonna do a dot dot slash remember that goes up one directory
then dot dot slash again that takes me up to my root project directory will then go into assets and
then we'll select the beach dot JP image to beach dot JP G OK.
So now we can save this and if we flip back over and navigate to the image screen once again we'll see
three copies of the beach image appear perfect OK.
So this is how we show an image that's been saved into our local project eventually we're going to want
to show an image that we've pulled from some source online as well.
Doing that requires just a slightly different setup than what we have right here.
Very slightly different.
We'll figure out how to do that later on.
But right now this is how we show a image that's been saved into our assets Directory OK.
So now that we understand how to show an image let's take another pause right here.
When we come back on the next video we're gonna make sure that when our image screen shows the image
detail it passes down another prop called image or maybe image source or something like that which will
be a path to the image that each of these image details should show on the screen so quick pause we'll
take care of that in the next video.