feat: configure responsive image sizes for optimized loading
Some checks failed
lotteryfront CI / build (push) Has been cancelled
Some checks failed
lotteryfront CI / build (push) Has been cancelled
- Added custom deviceSizes configuration in next.config.ts to support common mobile and desktop breakpoints - Added responsive sizes attribute to hall wallet strip background image for proper srcset generation
This commit is contained in:
@@ -9,6 +9,10 @@ const nextConfig: NextConfig = {
|
|||||||
...(allowedDevOrigins.length > 0 ? { allowedDevOrigins } : {}),
|
...(allowedDevOrigins.length > 0 ? { allowedDevOrigins } : {}),
|
||||||
reactCompiler: true,
|
reactCompiler: true,
|
||||||
|
|
||||||
|
images: {
|
||||||
|
deviceSizes: [640, 750, 828, 1080, 1200, 1920],
|
||||||
|
},
|
||||||
|
|
||||||
// 非 CSP 安全头;CSP 由 middleware 按后台接入站点白名单动态生成。
|
// 非 CSP 安全头;CSP 由 middleware 按后台接入站点白名单动态生成。
|
||||||
async headers() {
|
async headers() {
|
||||||
return [
|
return [
|
||||||
|
|||||||
@@ -91,6 +91,7 @@ export function HallWalletStrip() {
|
|||||||
src="/entry/image5.png"
|
src="/entry/image5.png"
|
||||||
alt=""
|
alt=""
|
||||||
fill
|
fill
|
||||||
|
sizes="(max-width: 768px) 100vw, 768px"
|
||||||
className="pointer-events-none object-cover object-center"
|
className="pointer-events-none object-cover object-center"
|
||||||
aria-hidden
|
aria-hidden
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user