Get 400 Bad Request: Next.js Image-CodePudding

I am using Next.js Image to render an image on my navbar.

Here is my code:

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

When I run this code in the browser, I get the following error:

GET http://localhost:3000/_next/image?url=/images/footprint.png&w=32&q=75 400 (Bad Request)

Does anyone have an idea of what might be going on? I am using Next version 12.2.2.

CodePudding user response：

if you have dowloaded image import first image and after use it like this

  import img from "/images/footprint.png"; //correct path of your image 

   <Image src={img} alt="logoImage"></Image>

any other query you can check https://nextjs.org/docs/api-reference/next/image