跳至內容
文件錯誤沒有 img 元素

沒有 img 元素

由於較慢的 LCP 和較高的頻寬，請避免使用 <img> 元素。

錯誤原因

使用了 <img> 元素來顯示圖片，而不是使用 next/image 中的 <Image />。

可能的解決方法

  1. 使用 next/image 並搭配自動 圖片優化 來提升效能。

注意事項：如果您部署到託管主機供應商，請記得檢查供應商的計價方式，因為優化後的圖片計費方式可能與原始圖片不同。

常見圖片優化平台計價方式

注意事項：如果是自行託管，請記得安裝 sharp 並檢查您的伺服器是否有足夠的儲存空間來快取優化後的圖片。

pages/index.js
import Image from 'next/image'
 
function Home() {
  return (
    <Image
      src="https://example.com/hero.jpg"
      alt="Landscape picture"
      width={800}
      height={500}
    />
  )
}
 
export default Home
  1. 如果您想使用 next/image 的功能，例如模糊漸進式佔位符，但停用圖片最佳化功能，您可以使用 unoptimized 參數來達成。
pages/index.js
import Image from 'next/image'
 
const UnoptimizedImage = (props) => {
  return <Image {...props} unoptimized />
}
  1. 您也可以使用巢狀 <img> 元素的 <picture> 元素。
pages/index.js
function Home() {
  return (
    <picture>
      <source srcSet="https://example.com/hero.avif" type="image/avif" />
      <source srcSet="https://example.com/hero.webp" type="image/webp" />
      <img
        src="https://example.com/hero.jpg"
        alt="Landscape picture"
        width={800}
        height={500}
      />
    </picture>
  )
}