跳至内容
文档错误无 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>
  )
}