賞金將在 6 天后到期。此問題的答案有資格獲得 200聲望賞金。 jedrzej.kurylo想引起更多關注這個問題：
我期望呈現滿足以下條件的 Next.js 的 <Image /> 組件的代碼示例： - 影像填充父組件，如 layout="fill" - 根據父容器的寬度和高度以降低的解析度下載影像
我正在嘗試用影像填充固定大小的容器。layout="fill"就像一個魅力，但即使 container is only 125x125，原始影像也會被下載，其解析度遠高于此，因此權重更大。我可以使用 降低解析度layout="fixed"，但是這樣我就失去了“填充”行為。
有沒有一種方法可以充分利用這兩個領域的優勢next/image-填充父容器，同時減少下載到客戶端設備的檔案大小？
uj5u.com熱心網友回復：
您可以配置deviceSizes屬性next.config.js以匹配應用程式中使用的斷點，因為這些斷點用于生成next/imagessrcset并提供正確大小的影像。
如果您知道用戶的預期設備寬度，則可以使用 中的
deviceSizes屬性 指定設備寬度斷點串列next.config.js。next/image當組件使用layout="responsive"或layout="fill"確保為用戶設備提供正確的影像時使用這些寬度。
如果渲染影像占用小于整個視口寬度，則上述內容應與sizes屬性配對。next/image
如果您使用
layout="fill",layout="responsive"，或者為占用小于整個視口寬度的任何影像layout="raw"分配，這一點很重要。sizes例如，當父元素將影像限制為始終小于視口寬度的一半時，請使用
sizes="50vw". 如果沒有sizes，影像將以所需解析度的兩倍發送，從而降低性能。
例如，假設您的應用程式使用以下設備斷點[320, 640, 1024, 1280, 1920]，并且您正在渲染240x240影像。
更新deviceSizes屬性以匹配斷點：
// next.config.js
module.exports = {
images: {
deviceSizes: [320, 640, 1024, 1280, 1920],
// Other existing `images` configs
},
// Other existing configs
}
然后設定sizes屬性next/image以建議理想的影像大小。
<div style={{ position: 'relative', width: 240, height: 240 }}>
<Image
src="<image-url>"
layout="fill"
sizes="50vw"
/>
</div>
您應該調整上述值以更好地適應您的用例。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/471341.html
上一篇：標記的影像物件不存在