Skip to content

Commit 4fdbfc3

Browse files
committed
chore: replace demo local images
1 parent 798ddc8 commit 4fdbfc3

File tree

3 files changed

+21
-24
lines changed

3 files changed

+21
-24
lines changed

example/pages/index.tsx

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import type { NextPage, GetStaticProps, InferGetStaticPropsType } from 'next';
22
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';
74
import { FC } from 'react';
85
import styles from '../styles/Home.module.css';
96
import staticImportImage from '../public/static_image.png';
@@ -19,14 +16,15 @@ const Code: FC<CodeProps> = (p) => (
1916
const BLUR_IMAGE_URL =
2017
'https://ucarecdn.com/c768f1c2-891a-4f54-8e1e-7242df218b51/pinewatt2Hzmz15wGikunsplash.jpg';
2118

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);
2523

26-
return {
27-
props: { blurDataURL }
28-
};
24+
return {
25+
props: { blurDataURL }
2926
};
27+
};
3028

3129
const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
3230
blurDataURL
@@ -35,7 +33,7 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
3533
<div className={styles.card}>
3634
<h1>
3735
Uploadcare custom loader for Image Component{' '}
38-
<a href="//github.com/uploadcare/nextjs-loader">
36+
<a href="https://github.com/uploadcare/nextjs-loader">
3937
@uploadcare/nextjs-loader
4038
</a>
4139
</h1>
@@ -48,9 +46,8 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
4846
proxying through Media Proxy.
4947
</p>
5048
<Image
51-
loader={uploadcareLoader}
5249
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"
5451
width={500}
5552
height={500}
5653
sizes="(max-width: 50rem) 100vw, 50rem"
@@ -63,7 +60,7 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
6360
</p>
6461
<UploadcareImage
6562
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"
6764
width={500}
6865
height={500}
6966
sizes="(max-width: 50rem) 100vw, 50rem"
@@ -94,27 +91,25 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
9491
<p>It will be proxied through Media Proxy.</p>
9592
<Image
9693
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"
9895
width={500}
9996
height={166}
100-
loader={uploadcareLoader}
97+
sizes="(max-width: 50rem) 100vw, 50rem"
10198
className={styles.fullWidthImage}
10299
/>
103100
<hr className={styles.hr} />
104101
<p>SVGs and GIFs will be used without transformations</p>
105102
<Image
106103
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"
108105
width={64}
109106
height={64}
110-
loader={uploadcareLoader}
111107
/>
112108
<Image
113109
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"
115111
width={64}
116112
height={64}
117-
loader={uploadcareLoader}
118113
/>
119114
<hr className={styles.hr} />
120115
<p>
@@ -125,8 +120,9 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
125120
alt="A local image"
126121
src="/local_image.png"
127122
width={600}
128-
height={400}
129-
loader={uploadcareLoader}
123+
height={200}
124+
sizes="(max-width: 50rem) 100vw, 50rem"
125+
className={styles.fullWidthImage}
130126
/>
131127
<hr className={styles.hr} />
132128
<p>
@@ -136,11 +132,12 @@ const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
136132
<Image
137133
alt="A statically imported image"
138134
src={staticImportImage}
139-
loader={uploadcareLoader}
135+
sizes="(max-width: 50rem) 100vw, 50rem"
136+
className={styles.fullWidthImage}
140137
/>
141138
<hr className={styles.hr} />
142139
Checkout the project documentation on Github{' '}
143-
<a href="//github.com/uploadcare/nextjs-loader">
140+
<a href="https://github.com/uploadcare/nextjs-loader">
144141
@uploadcare/nextjs-loader
145142
</a>
146143
.

example/public/local_image.png

4.64 KB
Loading

example/public/static_image.png

4.92 KB
Loading

0 commit comments

Comments
 (0)