无法在 NextJs 项目中导入图像答案

【问题标题】：Cannot import image in NextJs project无法在 NextJs 项目中导入图像
【发布时间】：2021-06-11 17:32:02
【问题描述】：

我正在将 previus React.js 网站转换为 Next.js 网站，并按照将 create react-app 转换为 next-app 的指南进行操作。

为了使用尾风类，导入图像以在 html vanilla <img> 标记内使用。按照一些关于此事的教程，他们建议安装next-images并使用以下代码配置next.config.js

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
 esModule: true
})

这是运行时抛出的错误

./components/partials/Features.js:3:0
Module not found: Can't resolve '/images/features-bg.png'
  1 | import React, { useState, useRef, useEffect } from 'react';
  2 | import Transition from '../utils/Transition.js';
> 3 | import FeaturesBg from '/images/features-bg.png';
  4 | import FeaturesElement from '/images/features-element.png'
  5 | import Image from 'next/image';
  6 |

我使用的文件夹结构遵循 create next-app 示例，public 文件夹包含所有静态文件。我在其中创建了一个images 文件夹，并验证文件名中没有拼写错误。完整的存储库可用here

有谁知道我做错了什么？

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

在下一个js中你应该把你的图片地址给img标签的src，你不应该导入它，像这样<img src="/images/features-element.png" alt="" />

【讨论】：

【解决方案2】：

指定的路径不正确。在你的情况下，它是../../public/images/filename.png。

如果你不确定你为什么使用next-images 包，也许你不需要它。只需将图像添加到public 并按照@m.hedayat 的建议引用它。

【讨论】：

Next.js 在运行时使用 /public 文件夹的绝对路径，next-app 使用它。该软件包应该允许像导入一样做出反应，我不知道为什么它不起作用。将在 npm 上打开一个问题
@DiogoNeiss，它可以，但不能用于导入 Node 模块。您需要在构建期间指定正确的路径，或者让浏览器从/public 加载图像，而不需要next-images。目前，您结合了两种不同的方法。

【解决方案3】：

将import FeaturesBg from '/images/features-bg.png' 更改为const FeaturesBg = '/images/features-bg.png' 和nextjs 相对/public 静态导入有效。

【讨论】：