I can't reference an image in Next.js

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.

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

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

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

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

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

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

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

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