如何为下一个/图像静态导入图像？答案

【问题标题】：How to statically import image for next/image?如何为下一个/图像静态导入图像？
【发布时间】：2021-11-08 02:47:13
【问题描述】：

我正在尝试静态导入图像以用于下一个/图像，但我不断收到错误：

./public/IMG_2117.png
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

next.config.js 文件没有自定义加载程序或任何东西 - documentation 表示它应该默认/自动与 next dev 一起工作（即不需要自定义加载程序）：

module.exports = {
    images: {
        deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
        imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    }
}

我正在像这样导入图像文件

import Image from "next/image"

import image1 from "../public/IMG_2117.png"

为什么会出现此错误，我该如何解决？

【问题讨论】：

您使用的是哪个 Next.js 版本？仅 v11 及更高版本支持静态图像导入。
这能回答你的问题吗？ I can't reference an image in Next.js
@brc-dd 谢谢，我使用的是 nextjs v10。既然你的评论解决了这个问题，它应该真的成为一个答案:)

标签： reactjs next.js

【解决方案1】：

由于你已经把图片放到了公共文件夹中，你只需要像这样直接在<Image />标签中调用它：

      <Image
        src="/IMG_2117.png" // Make sure to put "/" sign 
        alt="A picture"
        width={500}
        height={500}
      />

或者如果您仍想使用import image1 from "../public/IMG_2117.png"，您只需要：

      <Image
        src={image1} 
        alt="A picture"
        width={500}
        height={500}
      />

注意：需要指定width和height，如果不指定则需要使用layout props here

【讨论】：

虽然这是正确的，但这不是我想要的 - 我特别想静态导入图像。
@Dextication 我相信既然你已经把它放在public 文件夹中，它会自动作为一个静态文件。不再需要添加其他内容（例如节点中的.use()）。