strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make next/images responsive

Browse Source
This commit is contained in:
Sam Becker 2024-02-23 21:48:54 -06:00
parent 6e94f9f23a
commit 42b0ead70a
3 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
next.config.js
View File

@ -28,7 +28,7 @@ const createRemotePattern = (hostname) => hostname
/** @type {import('next').NextConfig} */ /** @type {import('next').NextConfig} */
const nextConfig = { const nextConfig = {
images: { images: {
imageSizes: [200, 1080], imageSizes: [200],
remotePatterns: [] remotePatterns: []
.concat(createRemotePattern(HOSTNAME_VERCEL_BLOB)) .concat(createRemotePattern(HOSTNAME_VERCEL_BLOB))
.concat(createRemotePattern(HOSTNAME_CLOUDFLARE_R2)) .concat(createRemotePattern(HOSTNAME_CLOUDFLARE_R2))

3
src/components/ImageBlurFallback.tsx
View File

@ -66,7 +66,7 @@ export default function ImageBlurFallback(props: ImageProps) {
className: clsx( className: clsx(
imageClassName, imageClassName,
// Fix poorly blurred placeholder data generated by Safari // Fix poorly blurred placeholder data generated by Safari
'blur-md scale-110', 'blur-md scale-105',
), ),
}} /> }} />
: <div className={clsx( : <div className={clsx(
@ -78,6 +78,7 @@ export default function ImageBlurFallback(props: ImageProps) {
...rest, ...rest,
ref: imgRef, ref: imgRef,
priority, priority,
layout: 'responsive',
className: imageClassName, className: imageClassName,
onLoad: () => setIsLoading(false), onLoad: () => setIsLoading(false),
onError: () => setDidError(true), onError: () => setDidError(true),

2
src/services/next-image.ts
View File

@ -1,7 +1,7 @@
import { BASE_URL } from '@/site/config'; import { BASE_URL } from '@/site/config';
// Explicity defined next.config.js `imageSizes` // Explicity defined next.config.js `imageSizes`
type NextCustomSize = 200 | 1080; type NextCustomSize = 200;
type NextImageDeviceSize = 640 | 750 | 828 | 1080 | 1200 | 1920 | 2048 | 3840; type NextImageDeviceSize = 640 | 750 | 828 | 1080 | 1200 | 1920 | 2048 | 3840;