We're working on the user interface
for our HomePage,
and we created a responsive grid,
that automatically shows 1 or 3 columns
depending on the screen size.
But we're still showing a placeholder image
for each product.
It's time to replace them
with the real product pictures.
When we fetch a product from the CMS
the JSON data includes a "picture" field,
but this is an object with many properties.
For this example I'm going to ignore
the different formats generated by Strapi.
What we need to display the picture
is just its "url".
So we can use this value.
But this is not a full address, it's only the path.
To construct the full URL
we'll need to append that path
to the server address where our CMS is running.
And if we fetch this URL now
we can see the image for Aloe Vera.
Ok. Now that we know how to extract
the image URL from the CMS response,
let's add a "pictureUrl" property
to the product object we return
from our own "getProduct" function.
And we can set this to the "picture.url" property
in the data returned by the CMS.
But since that's just a path
we'll need to prepend the CMS_URL.
Which incidentally means that to display images
the browser will need direct access to the CMS server.
Now that we include the "pictureUrl"
in our product object
we can replace this placeholder image
with the "product.pictureUrl".
Let me show the browser window,
so that when we save
you can see the images displayed on the page.
So that's looking good.
Let's see it in a large screen as well.
The only problem is that
these images are not optimised
for being displayed in this size.
If we inspect this image using the Dev Tools,
you can see that its original size
is 960 by 720 pixels.
But we're displaying it at
slightly less than 320 by 240 pixels.
So we're loading images that are
a lot larger than they need to be.
Now, we could manually create
smaller versions of these images
and upload them to our CMS,
but that would be a lot of work.
In the next video we'll see how
Next.js comes with a feature
that can automatically optimise images for us.
And not just resize them, but also
convert them to more efficient formats,
and take care of lazy loading.