无法导入NextJs项目中的镜像

Question

我正在将之前的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

有人知道我做错了什么吗？

Answer 1

将import FeaturesBg from '/images/features-bg.png'更改为const FeaturesBg = '/images/features-bg.png'，并且nextjs相对/public静态导入起作用。

Answer 2

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

Answer 3

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

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