使用Next.js Image渲染导航栏图片时出现400 Bad Request错误求助

我在Next.js 12.2.2中使用Image组件在导航栏渲染图片，代码如下：

import Link from 'next/link'
import Image from 'next/image'
import { Text, useColorModeValue } from '@chakra-ui/react'
import styled from '@emotion/styled'

const LogoBox = styled.span`
  font-weight: bold;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  height: 30px;
  line-height: 20px;
  padding: 10px;

  &:hover img {
    transform: rotate(20deg);
  }
`
const Logo = () => {
  const footPrintImg = `/images/footprint${useColorModeValue('', '-dark')}.png`

  return (
    <Link href="/" scroll={false}>
      <a>
        <LogoBox>
          <Image src={footPrintImg} width={20} height={20} alt="logo" />
          <Text
            color={useColorModeValue('gray.800', 'whiteAlpha.900')}
            fontFamily='"M PLUS Rounded 1c", sans-serif'
            fontWeight="bold"
            ml={3}
          >
            Brad Bieselin
          </Text>
        </LogoBox>
      </a>
    </Link>
  )
}

export default Logo

运行后出现错误：

GET http://localhost:3000/_next/image?url=%2Fimages%2Ffootprint.png&w=32&q=75 400 (Bad Request)

问题原因及解决方法 #

1. 图片文件路径或存在性问题

先确认public/images/footprint.png和public/images/footprint-dark.png是否存在，注意文件名大小写敏感（比如Unix系统下Footprint.png和footprint.png会被识别为不同文件）。

2. 动态本地图片路径的静态分析限制

Next.js的静态构建无法识别动态拼接的字符串路径（比如/images/footprint${...}.png），导致Image组件无法正确处理图片优化，从而返回400错误。

有两种解决方式：

• 方式一：提前import图片

  import Link from 'next/link'
  import Image from 'next/image'
  import { Text, useColorModeValue } from '@chakra-ui/react'
  import styled from '@emotion/styled'
  // 提前引入本地图片资源
  import FootprintLight from '/images/footprint.png'
  import FootprintDark from '/images/footprint-dark.png'
  
  const LogoBox = styled.span`
    font-weight: bold;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    height: 30px;
    line-height: 20px;
    padding: 10px;
  
    &:hover img {
      transform: rotate(20deg);
    }
  `
  const Logo = () => {
    const footPrintImg = useColorModeValue(FootprintLight, FootprintDark)
  
    return (
      <Link href="/" scroll={false}>
        <a>
          <LogoBox>
            <Image src={footPrintImg} width={20} height={20} alt="logo" />
            <Text
              color={useColorModeValue('gray.800', 'whiteAlpha.900')}
              fontFamily='"M PLUS Rounded 1c", sans-serif'
              fontWeight="bold"
              ml={3}
            >
              Brad Bieselin
            </Text>
          </LogoBox>
        </a>
      </Link>
    )
  }
  
  export default Logo
  

• 方式二：使用require动态引入

  const Logo = () => {
    const footPrintImg = useColorModeValue(
      require('/images/footprint.png').default,
      require('/images/footprint-dark.png').default
    )
  
    // 其余代码保持不变
  }
  

3. 检查Next.js图片优化配置

确保next.config.js中的图片配置没有限制本地图片的处理，示例配置如下：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    unoptimized: false, // 保持默认开启图片优化
    // 本地图片无需配置domains，若配置了domains需确保包含localhost或本地路径
  },
}

module.exports = nextConfig

内容的提问来源于stack exchange，提问作者Brad Bieselin