为什么Image标签的src不能识别我的jpg？

Question

我正在尝试在我的投资组合中插入图像，但由于某种原因，标签返回 404 并且下一个图像返回错误

The requested resource isn't a valid image for /myImage.jpg received text/html

这是代码块：

import Image from "next/image";
import { ReactElement } from "react";

const MyImage = ():ReactElement => {
    return (
        <Image
            fill
            src='/myImage.jpg'
            alt="MyImage"
            />
    )
}

export default MyImage

Answer 1

Image

组件对于处理图像源非常严格。

您得到

404

，这意味着

not found

或

invalid image

。

1. 检查您的文件位置。

• 确保您的

  myImage.jpg

  正确放置在

  public

  文件夹中。

2. 所请求的资源不是 /myImage.jpg 收到的 text/html 的有效图像

• received text/html

  此错误意味着您正在传递

  html

  ，或者图像可能无法正确提供，这可能会返回

  html

  错误页面。请确保该文件确实存在于您指定的路径中，并仔细检查这是否是有效的图像。

3. 如果这两个选项都没有帮助。

• 尝试在线托管图像。如果您想使用在线图像或网址，则必须更新

  next.config.js

  文件以允许该域用于外部图像。

在你的

next.config.js

：

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'domainOfSiteYouHostedYourImage.com',
        port: '',
        pathname: '/**',
      },
    ],
  },
}

希望这有效并解决您的问题