I can't reference an image in Next.js

Question

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 

In Main.js I have the following code

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

I get the following error

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)

I tried doing the following

In next-config.js

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

I'm still getting the same error.

What am I doing wrong?

Answer 1

Please see https://nextjs.org/docs/basic-features/static-file-serving

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

Answer 2

/public/favicon/mail.png

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