next/image yra Next.js optimizuota <img> žymos pakeitimas. Jis automatiškai taikomai kelią vaizdų efektyvumo geriausios praktiką, kuriuos kitaip turėtumėte taikyti rankiniu būdu.
tsx
;
() {
(
);
}
next/image yra Next.js optimizuota <img> žymos pakeitimas. Jis automatiškai taikomai kelią vaizdų efektyvumo geriausios praktiką, kuriuos kitaip turėtumėte taikyti rankiniu būdu.
;
() {
(
);
}
srcset — sukuria kelis dydžius, kad kiekvienas įrenginys atsisiųstų tinkamą.priority).width/height (arba fill) išsaugo vietą, kad puslapis nepašoktų, kai įkeliamas vaizdas.placeholder="blur" rodo nedidelę neryškią peržiūrą, kai įkeliama.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Naudokite fill (o ne fiksuotą plotį/aukštį), kai vaizdas turėtų užpildyti savo išdėstytą tėvą — paprastai naudojamas herojaus/viršelio vaizdams.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Vaizdai paprastai yra sunkiausi puslapio turtai ir pagrindinė silpnų Core Web Vitals priežastis (LCP, CLS). next/image automatizuoja dydžio keitimą, modernūs formatus, atsakingą srcset, tingų įkėlimą ir rangų poslinkio prevenciją — paverčiant pagrindinę efektyvumo darbą į vieną komponentą, kai priority LCP vaizdui yra vienintelis rantas, kurį turite prisiminti.