1
00:00:00,000 --> 00:00:02,000
So let's now work

2
00:00:02,000 --> 00:00:06,000
on optimizing these user-generated images.

3
00:00:06,000 --> 00:00:07,000
And one problem we'll have here

4
00:00:07,000 --> 00:00:11,000
is that we don't know the size of the files

5
00:00:11,000 --> 00:00:14,000
that have been uploaded by the users in advance,

6
00:00:14,000 --> 00:00:18,000
but I'll of course show you how to work around that.

7
00:00:18,000 --> 00:00:21,000
Now let's start by going to the post component

8
00:00:21,000 --> 00:00:24,000
where we output those images.

9
00:00:24,000 --> 00:00:26,000
And of course we can start

10
00:00:26,000 --> 00:00:29,000
by also using the NextJS image component here

11
00:00:29,000 --> 00:00:33,000
instead of the native built-in image element.

12
00:00:33,000 --> 00:00:34,000
For that, you must make sure

13
00:00:34,000 --> 00:00:36,000
that you import that component though,

14
00:00:36,000 --> 00:00:40,000
so that you import image from next image.

15
00:00:41,000 --> 00:00:43,000
Now, if you do that

16
00:00:43,000 --> 00:00:45,000
and you would save the code like this,

17
00:00:45,000 --> 00:00:47,000
you would get an error

18
00:00:47,000 --> 00:00:48,000
and you would get an error

19
00:00:48,000 --> 00:00:53,000
because of course, we're now setting a string path

20
00:00:53,000 --> 00:00:56,000
as the source for our image component.

21
00:00:56,000 --> 00:00:59,000
And as you saw before, that doesn't work like that.

22
00:00:59,000 --> 00:01:02,000
Instead, this image component wants an object

23
00:01:02,000 --> 00:01:07,000
as a value for the source prop, or does it?

24
00:01:07,000 --> 00:01:10,000
Well, actually it needs such an object

25
00:01:10,000 --> 00:01:13,000
if you're not setting a width and height manually.

26
00:01:13,000 --> 00:01:16,000
But if you do set width and height props

27
00:01:16,000 --> 00:01:18,000
on the next image component,

28
00:01:18,000 --> 00:01:22,000
you can indeed use a string path here.

29
00:01:22,000 --> 00:01:25,000
Now, the width and height you do set here could be used

30
00:01:25,000 --> 00:01:27,000
to size the image

31
00:01:27,000 --> 00:01:29,000
and you could therefore set width and height

32
00:01:29,000 --> 00:01:33,000
to the sizes you wanna display the image at,

33
00:01:33,000 --> 00:01:36,000
but that's actually not how you should use these props.

34
00:01:36,000 --> 00:01:38,000
As I mentioned before,

35
00:01:38,000 --> 00:01:40,000
whilst you can do it as a workaround,

36
00:01:40,000 --> 00:01:44,000
it's not the recommended way of using width and height.

37
00:01:44,000 --> 00:01:48,000
Instead, you should normally set the native raw width

38
00:01:48,000 --> 00:01:51,000
and height of the input image here.

39
00:01:51,000 --> 00:01:54,000
And of course, we don't know that if the image was chosen

40
00:01:54,000 --> 00:01:56,000
and uploaded by a user of our website.

41
00:01:57,000 --> 00:02:00,000
Therefore, what NextJS offers

42
00:02:00,000 --> 00:02:03,000
as an alternative in situations like this

43
00:02:03,000 --> 00:02:06,000
is that you set the fill prop here.

44
00:02:07,000 --> 00:02:09,000
And you can simply add it like this

45
00:02:09,000 --> 00:02:11,000
and therefore set it to true.

46
00:02:11,000 --> 00:02:16,000
If you do that, you'll see that we still get an error,

47
00:02:16,000 --> 00:02:18,000
but now it's a different error

48
00:02:18,000 --> 00:02:20,000
that essentially this host name

49
00:02:20,000 --> 00:02:24,000
from which we're trying to fetch the image is not configured

50
00:02:24,000 --> 00:02:27,000
under images in our next config.

51
00:02:27,000 --> 00:02:29,000
So what's this error about?

52
00:02:30,000 --> 00:02:33,000
Well, whenever you are loading an image

53
00:02:33,000 --> 00:02:36,000
from an external site, as we're doing it here,

54
00:02:36,000 --> 00:02:40,000
NextJS for security reasons, blocks that image

55
00:02:40,000 --> 00:02:43,000
and gives you that error instead.

56
00:02:43,000 --> 00:02:46,000
But of course, here we wanna load the image

57
00:02:46,000 --> 00:02:47,000
from that remote site

58
00:02:47,000 --> 00:02:50,000
and therefore what we have to do is we have to go

59
00:02:50,000 --> 00:02:52,000
to this next.config file

60
00:02:52,000 --> 00:02:57,000
and unlock this specific external site, so to say,

61
00:02:57,000 --> 00:02:59,000
to allow loading images from there.

62
00:03:00,000 --> 00:03:04,000
And you do that by adding the images property here

63
00:03:04,000 --> 00:03:06,000
to this configuration object,

64
00:03:07,000 --> 00:03:10,000
and you set this to an object itself.

65
00:03:10,000 --> 00:03:15,000
And then in there you can add the remotePatterns setting

66
00:03:16,000 --> 00:03:18,000
and set this to an array

67
00:03:18,000 --> 00:03:22,000
of remote host addresses you wanna allow

68
00:03:22,000 --> 00:03:26,000
for loading images in your NextJS application.

69
00:03:26,000 --> 00:03:30,000
Now, remotePatterns actually wants an array of objects

70
00:03:30,000 --> 00:03:33,000
and in every object you can then set up a host name.

71
00:03:33,000 --> 00:03:35,000
So the domain name in the end

72
00:03:35,000 --> 00:03:38,000
of these external sites you wanna allow.

73
00:03:38,000 --> 00:03:42,000
In my case here, res.cloudinary.com,

74
00:03:42,000 --> 00:03:46,000
that is the domain with which all those links

75
00:03:46,000 --> 00:03:49,000
to the Cloudinary hosted images will start.

76
00:03:50,000 --> 00:03:52,000
By adding this configuration setting

77
00:03:52,000 --> 00:03:54,000
and then saving this file,

78
00:03:54,000 --> 00:03:57,000
you will see that if you now reload, this error goes away.

79
00:03:57,000 --> 00:03:59,000
But now I got large images

80
00:03:59,000 --> 00:04:03,000
which take up the entire size of the screen.

81
00:04:03,000 --> 00:04:06,000
And that's happening because of this fill prop.

82
00:04:06,000 --> 00:04:09,000
And it's of course not the behavior we want

83
00:04:09,000 --> 00:04:10,000
so let's work on that.