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?

Why do you need to import it? Can't you just do ``? – Brian Thompson Dec 31 '19 at 16:18 — Brian Thompson, Dec 31 '19 at 16:18

score 34 · Answer 1 · answered Jul 20 '21 at 10:22

34

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.

answered Jul 20 '21 at 10:22

brc-dd

10,788
3
47
67

check out the [following answer](https://stackoverflow.com/a/68429232/6908282) if you'd like to use markdown flavored images – Gangula Jan 30 '22 at 14:02
found this article which can be of help: https://noahflk.com/blog/next-image-optimization – Gangula Jan 30 '22 at 14:22
the .src did the trick for me, thanks! – Bowis Jul 26 '22 at 08:27

score 31 · Accepted Answer · answered Jan 19 '21 at 14:06

31

/public/favicon/mail.png

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

answered Jan 19 '21 at 14:06

2donny

426
4
4

score 24 · Answer 3 · answered Dec 31 '19 at 16:20

24

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

answered Dec 31 '19 at 16:20

Blake Plumb

6,779
3
33
54

Hello. Do you know how can I get content from the Public folder into dynamic pages, i.e - dynamic[id].js ? – Arp Oct 01 '20 at 01:04

score 10 · Answer 4 · answered Jan 08 '20 at 20:40

10

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}/>

answered Jan 08 '20 at 20:40

Olavi

821
4
12

Hello. Do you know how can I get content from the Public folder into dynamic pages, i.e - dynamic[id].js ? – Arp Oct 01 '20 at 01:04
Unfortunately it did not work. Nothing seems to work. – Aliton Oliveira Jul 07 '21 at 01:43
Mixing require with import does not bode well. If you use ES6 style, you'll need to stick to it. – David Aug 05 '22 at 15:04

KJ Sudarshan · Answer 5 · 2021-06-22T10:30:28.993

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:

score 2 · Answer 6 · answered May 29 '21 at 12:58

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

score 0 · Answer 7 · edited Aug 24 '22 at 13:50

0

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" />

edited Aug 24 '22 at 13:50

Larissa

118
2
10

answered Aug 17 '21 at 08:24

Alejandro Yunes

69
2

1

pro tip: you can add code fences to format the codes – I_love_vegetables Aug 18 '21 at 06:36

score 0 · Answer 8 · answered Nov 17 '22 at 19:27

0

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

answered Nov 17 '22 at 19:27

kani.euro

11
2

Taha Namdar · Answer 9 · 2023-08-25T14:15:25.750

0

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

edited Aug 25 '23 at 14:15

answered Aug 25 '23 at 14:14

Taha Namdar

1
1

I can't reference an image in Next.js

9 Answers9

Linked

Related