1
1
import type { NextPage , GetStaticProps , InferGetStaticPropsType } from 'next' ;
2
2
import Image from 'next/image' ;
3
- import UploadcareImage , {
4
- uploadcareLoader ,
5
- getBlurDataURL
6
- } from '@uploadcare/nextjs-loader' ;
3
+ import UploadcareImage , { getBlurDataURL } from '@uploadcare/nextjs-loader' ;
7
4
import { FC } from 'react' ;
8
5
import styles from '../styles/Home.module.css' ;
9
6
import staticImportImage from '../public/static_image.png' ;
@@ -19,14 +16,15 @@ const Code: FC<CodeProps> = (p) => (
19
16
const BLUR_IMAGE_URL =
20
17
'https://ucarecdn.com/c768f1c2-891a-4f54-8e1e-7242df218b51/pinewatt2Hzmz15wGikunsplash.jpg' ;
21
18
22
- export const getStaticProps : GetStaticProps < { blurDataURL : string } > =
23
- async ( ) => {
24
- const blurDataURL = await getBlurDataURL ( BLUR_IMAGE_URL ) ;
19
+ export const getStaticProps : GetStaticProps < {
20
+ blurDataURL : string ;
21
+ } > = async ( ) => {
22
+ const blurDataURL = await getBlurDataURL ( BLUR_IMAGE_URL ) ;
25
23
26
- return {
27
- props : { blurDataURL }
28
- } ;
24
+ return {
25
+ props : { blurDataURL }
29
26
} ;
27
+ } ;
30
28
31
29
const Home : NextPage < InferGetStaticPropsType < typeof getStaticProps > > = ( {
32
30
blurDataURL
@@ -35,7 +33,7 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
35
33
< div className = { styles . card } >
36
34
< h1 >
37
35
Uploadcare custom loader for Image Component{ ' ' }
38
- < a href = "//github.com/uploadcare/nextjs-loader" >
36
+ < a href = "https: //github.com/uploadcare/nextjs-loader" >
39
37
@uploadcare/nextjs-loader
40
38
</ a >
41
39
</ h1 >
@@ -48,9 +46,8 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
48
46
proxying through Media Proxy.
49
47
</ p >
50
48
< Image
51
- loader = { uploadcareLoader }
52
49
alt = "Vercel logo"
53
- src = "//ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/vercel.png"
50
+ src = "https: //ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/vercel.png"
54
51
width = { 500 }
55
52
height = { 500 }
56
53
sizes = "(max-width: 50rem) 100vw, 50rem"
@@ -63,7 +60,7 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
63
60
</ p >
64
61
< UploadcareImage
65
62
alt = "Vercel logo"
66
- src = "//ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/vercel.png"
63
+ src = "https: //ucarecdn.com/a6f8abc8-f92e-460a-b7a1-c5cd70a18cdb/vercel.png"
67
64
width = { 500 }
68
65
height = { 500 }
69
66
sizes = "(max-width: 50rem) 100vw, 50rem"
@@ -94,27 +91,25 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
94
91
< p > It will be proxied through Media Proxy.</ p >
95
92
< Image
96
93
alt = "Next.js logo"
97
- src = "//assets.vercel.com/image/upload/v1538361091/repositories/next-js/next-js.png"
94
+ src = "https: //assets.vercel.com/image/upload/v1538361091/repositories/next-js/next-js.png"
98
95
width = { 500 }
99
96
height = { 166 }
100
- loader = { uploadcareLoader }
97
+ sizes = "(max-width: 50rem) 100vw, 50rem"
101
98
className = { styles . fullWidthImage }
102
99
/>
103
100
< hr className = { styles . hr } />
104
101
< p > SVGs and GIFs will be used without transformations</ p >
105
102
< Image
106
103
alt = "Next.js logo"
107
- src = "//ucarecdn.com/375bba4b-35db-4cb8-8fc7-7540625f2181/next.svg"
104
+ src = "https: //ucarecdn.com/375bba4b-35db-4cb8-8fc7-7540625f2181/next.svg"
108
105
width = { 64 }
109
106
height = { 64 }
110
- loader = { uploadcareLoader }
111
107
/>
112
108
< Image
113
109
alt = "Vercel logo"
114
- src = "//ucarecdn.com/0f23a269-13eb-4fc9-b378-86f224380d26/vercel.gif"
110
+ src = "https: //ucarecdn.com/0f23a269-13eb-4fc9-b378-86f224380d26/vercel.gif"
115
111
width = { 64 }
116
112
height = { 64 }
117
- loader = { uploadcareLoader }
118
113
/>
119
114
< hr className = { styles . hr } />
120
115
< p >
@@ -125,8 +120,9 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
125
120
alt = "A local image"
126
121
src = "/local_image.png"
127
122
width = { 600 }
128
- height = { 400 }
129
- loader = { uploadcareLoader }
123
+ height = { 200 }
124
+ sizes = "(max-width: 50rem) 100vw, 50rem"
125
+ className = { styles . fullWidthImage }
130
126
/>
131
127
< hr className = { styles . hr } />
132
128
< p >
@@ -136,11 +132,12 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
136
132
< Image
137
133
alt = "A statically imported image"
138
134
src = { staticImportImage }
139
- loader = { uploadcareLoader }
135
+ sizes = "(max-width: 50rem) 100vw, 50rem"
136
+ className = { styles . fullWidthImage }
140
137
/>
141
138
< hr className = { styles . hr } />
142
139
Checkout the project documentation on Github{ ' ' }
143
- < a href = "//github.com/uploadcare/nextjs-loader" >
140
+ < a href = "https: //github.com/uploadcare/nextjs-loader" >
144
141
@uploadcare/nextjs-loader
145
142
</ a >
146
143
.
0 commit comments