javascript - 我无法在 Next.js 中引用图像

Question

我有一个在 Next.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

从 Next.js v11 开始，您无需任何额外配置即可完成您正在做的事情:

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

<Image src={macbookIphone} />

// or

<img src={macbookIphone.src} />

引用号:next/image

对于早期版本，如果您希望导入图像而不是将其放入公共(public)目录中，则可以配置 file-loader 或 url-loader。