CODEWITHSUNDEEP
javascriptreactjsnext.js
Rue Vitale
Rue Vitale

Reputation: 1895

I can't reference an image in Next.js

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?

Upvotes: 49

Views: 179710

Answers (10)

roudlek
roudlek

Reputation: 385

  • 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 ...

Upvotes: 0

Taha Namdar
Taha Namdar

Reputation: 21

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

Upvotes: 2

kani.euro
kani.euro

Reputation: 39

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

Upvotes: 0

Alejandro Yunes
Alejandro Yunes

Reputation: 85

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

Upvotes: 0

brc-dd
brc-dd

Reputation: 13044

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.

Upvotes: 52

KJ Sudarshan
KJ Sudarshan

Reputation: 3252

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

Upvotes: 7

Ahmad
Ahmad

Reputation: 1655

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

Upvotes: 3

2donny
2donny

Reputation: 526

/public/favicon/mail.png

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

Upvotes: 41

Olavi
Olavi

Reputation: 859

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

Upvotes: 12

Blake Plumb
Blake Plumb

Reputation: 7209

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

Upvotes: 24

Related Questions