我无法在 Next.js 中引用图像 [英] I can't reference an image in Next.js

问题描述

我有一个在 Next.js 页面中使用的 React 组件:

I have a React component that's being used in Next.js page:

/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 我有以下代码

In Main.js I have the following code

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

我收到以下错误

模块解析失败:意外字符 ' ' (1:0) 您可能需要一个适当的加载器来处理这种文件类型，目前没有加载器配置为处理此文件.看https://webpack.js.org/concepts#loaders(这里省略了源代码二进制文件)

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()

我仍然遇到同样的错误.

I'm still getting the same error.

我做错了什么?

推荐答案

/public/favicon/mail.png

/public/favicon/mail.png

=>/favicon/mail.png"会工作

=> "/favicon/mail.png" will work

这篇关于我无法在 Next.js 中引用图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！