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?

Ludhiana

Why do you need to import it? Can't you just do <img src='../../assets/images/mac-iphone.jpg' />? – Ejecta

Answer 1

/public/favicon/mail.png

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

Schoolgirl

Answer 2

From Next.js v11 onwards, you can do what you were doing without any additional config:

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

<Image src={macbookIphone} />

// or

<img src={macbookIphone.src} />

Ref: next/image

For earlier versions if you wish to import images instead of putting them in public directory, then you can configure file-loader or url-loader.

Porkpie

check out the following answer if you'd like to use markdown flavored images – Kokura

found this article which can be of help: noahflk.com/blog/next-image-optimization – Kokura

the .src did the trick for me, thanks! – Apia

Answer 3

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

Psychologism

Hello. Do you know how can I get content from the Public folder into dynamic pages, i.e - dynamic[id].js ? – Turpeth

Answer 4

At least in our project, we use require for images instead of import. Our next config looks similar to yours.

Try the following and see if it helps:

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

You can then use your image as the src like this:

<img src={macbookIphone}/>

Harless

Hello. Do you know how can I get content from the Public folder into dynamic pages, i.e - dynamic[id].js ? – Turpeth

Unfortunately it did not work. Nothing seems to work. – Exemplify

Mixing require with import does not bode well. If you use ES6 style, you'll need to stick to it. – Aldoaldol

Answer 5

Using images in Next.js is a bit different:

All your static assets like images must be placed in the public directory.

• If your code is under src directory, i.e <app-name>/src/pages , <app-name>/src/components, ... then your public folder must be outside of the src directory. Public folder cannot be under src as <app-name>/src/public. In this case your public directory must be under <app-name>/public.

• If your code is not under src directory, i.e <app-name>/pages, <app-name>/components, ... then your public directory should be under <app-name>/public

Once you have that sorted, directly refer to the file in the <Image /> component provided by next/image as:

import Image from "next/image"
<Image src="/sample-image.png" width="64" height="64" />

or

import Image from "next/image"
import sampleImage from "<file-path>"

<Image src={sampleImage} width="64" height="64" />

provided you have a file under public/sample-image.png

If you have an image URL, directly provide it to the 'src' prop.

Find descriptive examples related to layouts at: https://github.com/vercel/next.js/tree/canary/examples/image-component

References:

1. https://nextjs.org/docs/basic-features/static-file-serving
2. https://nextjs.org/docs/api-reference/next/image
3. https://nextjs.org/docs/basic-features/image-optimization
4. https://nextjs.org/docs/advanced-features/src-directory

Peres

Answer 6

You can import images by using next-images

Step 1

npm install --save next-images

or

yarn add next-images

Step 2

// Create next.config.js
const withImages = require('next-images')
module.exports = withImages()

For Typescript

// Add following line in next-env.d.ts
/// <reference types="next-images" />

Restart your server and now you can import your images like

import img1 from "assets/images/cover_images/blog_1.png"

https://github.com/twopluszero/next-images

Eubanks

Answer 7

you can import image then you should use it easily

import pic1 from "../public/assets/12093.jpg";

 <Image src={pic1} alt="photo" fill={true} />

it's work for me :)

Mima

Answer 8

it worked for me like this, but putting the file in the public folder:

<Image width={150} height={100} src={'/punkieslogo.png'} alt="Picture of the author" />

Impulsive

pro tip: you can add code fences to format the codes – Shala

Answer 9

you cannot access images in Next.js like in React.js unless they are stored in 'public' folder.

Clementina

Answer 10

• add your images inside public folder
• for organizing add images folder inside public folder
• if you're using nextjs Image component, add src attribute
• the root folder for images or icons is by default /public
• so start from the folder you want inside public, like this : src="/images/yourpicture.png"
• Don't forget to add the extension .png .jpeg ...

Borges