React无法导入图片，提示"不是有效的图片文件"。

Question

我正在尝试编译一个包含图片的项目。当我使用yarn dev时，几乎可以编译所有内容，但是当涉及到图片时，它总是会给我以下错误：

Error: Image import "../assets/images/banner-moc-1-1.png" is not a valid image file. The image may be corrupted or an unsupported format.

我不明白为什么它会这样说，因为我的文件是经典的png格式。我不认为问题来自于图像。

我有什么遗漏吗？

我正在使用一个next模板。在构建过程中出现了一个类型错误问题。我已经将packages.json中的每个包更新到最新版本，以为它会起作用。现在编译完成，但是它给我上面所读的错误信息。

- Suplink

---

你在使用 next.js 吗？ - AmeriNam20

通常情况下，当您的导入路径错误时会出现错误。或者可能是项目打包程序（通常是webpack）无法理解该文件。如果您使用模板设置了项目，则不应出现此情况。您是否尝试使用不同的文件/图像文件类型来检查是否是文件的问题？ - HJEC

我使用Next.js - Suplink

你有任何进展吗？我恰好有一个非常非常相似的设置，并遇到了完全相同的错误。我也在使用Next.js，在使用图像方面遇到了一些困难。请参见此处：https://dev59.com/bn0QtIcB2Jgan1znfKBp - Razorshnegax018

@大家 我找到了一个解决方案，你们需要编辑你们的nextjs配置文件。请参考这里。 - Razorshnegax018

Answer 1

我找到了一个适合我的Next.js配置：

// @generated: @expo/next-adapter@2.1.52
// Learn more: https://docs.expo.io/guides/using-nextjs/

const { withExpo } = require("@expo/next-adapter");
const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const withFonts = require("next-fonts");
const withTM = require("next-transpile-modules")(["react-native-web"]);

const nextConfig = {
  images: {
    disableStaticImages: true,
  },
};

module.exports = withPlugins(
  [withTM, withExpo, withImages, withFonts],
  nextConfig
);

这是我的 GitHub 问题链接

以及我找到答案的地方链接（Steven Matthews）

注意：这是为我的 React Native Web + Next.js 项目准备的。它应该可以工作，但如果不能，我不知道该怎么办。

- Razorshnegax018

Answer 2

我曾经遇到过同样的问题，并通过将图像的路径放置到图像 src 属性中（<Image src='/some-path' />），并移除所有的图像导入（import SomeImage from 'some-path'）来解决它。

- Željko Šević