我无法在next-js中引用图像

Question

我有一个下一个js页面正在使用的React组件：

/ pages / index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Layout from "../src/hoc/Layout/Layout";
import Main from "../src/components/Main/Main";

const Index = () => (
   <Layout>
       <Main />
   </Layout>
);
export default Index

在Main.js中，我有以下代码

import macbookIphone from '../../assets/images/mac-iphone.jpg';

我收到以下错误

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 (Source code omitted for this binary file)

我尝试执行以下操作

在next-config.js中

const withImages = require('next-images')
module.exports = withImages()

我仍然遇到相同的错误。

我在做什么错？

Answer 1

请参阅https://nextjs.org/docs/basic-features/static-file-serving

Next.js可以在根目录中名为public的文件夹下提供静态文件，例如图像。然后，您的代码可以从基本URL（/）开始引用public内部的文件。

Answer 2

至少在我们的项目中，我们对图像使用require而不是导入。我们的下一个配置看起来与您的类似。

尝试以下操作，看是否有帮助：

const macbookIphone = require('../../assets/images/mac-iphone.jpg');

然后您可以像这样将图像用作src：

<img src={macbookIphone}/>