我无法引用 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

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

Answer 3

/public/favicon/mail.png

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

Answer 4

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, ie <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, ie <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

Answer 5

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

Answer 6

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 .

Answer 7

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

Answer 8

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

Answer 9

This is pretty straightforward.

1. Add your image to the /public folder.
2. Now reference that image location in the Image src with its absolute path like below:

<Image
   src="/profile_banner.jpg"
   alt="cover picture"
   layout="fill"
 />