我无法引用 Next.js 中的图像

Question

我有一个在 Next.js 页面中使用的 React 组件：

/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

在 Main.js 中，我有以下代码

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

我收到以下错误

模块解析失败：意外字符 '�' (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。 请参见https://webpack.js.org/concepts#loaders （此二进制文件省略了源代码）

我尝试执行以下操作

在next-config.js 中

const withImages = require('next-images')
module.exports = withImages()

我仍然遇到同样的错误。

我究竟做错了什么？

Answer 1

请参阅https://nextjs.org/docs/basic-features/static-file-serving

Next.js 可以在根目录中名为 public 的文件夹下提供静态文件，如图像。 然后，您的代码可以从基本 URL (/) 开始引用 public 中的文件。

Answer 2

至少在我们的项目中，我们对图像使用 require 而不是 import。 我们的下一个配置看起来与您的相似。

尝试以下操作，看看是否有帮助：

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

然后，您可以像这样使用您的图像作为 src：

<img src={macbookIphone}/>

Answer 3

/public/favicon/mail.png

=> "/favicon/mail.png" 会工作

Answer 4

在 Next.js 中使用图像有点不同：

所有静态资产（如图像）都必须放在public目录中。

• 如果您的代码在src目录下，即<app-name>/src/pages , <app-name>/src/components, ...那么您的公共文件夹必须在 src 目录之外。 公共文件夹不能作为<app-name>/src/public.在 src 下<app-name>/src/public. 在这种情况下，您的公共目录必须位于<app-name>/public 。

• 如果你的代码不在src目录下，即<app-name>/pages, <app-name>/components, ...那么你的 public 目录应该在<app-name>/public

排序后，直接引用next/image提供的<Image />组件中的文件为：

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

要么

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

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

如果您在public/sample-image.png下有一个文件

如果您有图片 URL，请直接将其提供给 'src' 道具。

在以下位置找到与布局相关的描述性示例： https : //github.com/vercel/next.js/tree/canary/examples/image-component

参考：

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

您可以使用next-images导入next-images

第1步

npm install --save next-images

要么

yarn add next-images

第2步

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

对于打字稿

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

重新启动您的服务器，现在您可以导入您的图像，例如

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

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

Answer 6

从 Next.js v11 开始，你可以在没有任何额外配置的情况下做你正在做的事情：

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

<Image src={macbookIphone} />

// or

<img src={macbookIphone.src} />

参考： next/image

对于早期版本，如果您希望导入图像而不是将它们放在公共目录中，那么您可以配置file-loader或url-loader 。

Answer 7

它像这样对我有用，但将文件放在公共文件夹中：

<图片宽度={150} 高度={100} src={'/punkieslogo.png'} alt="作者图片" />

Answer 8

您不能像在 React.js 中那样访问 Next.js 中的图像，除非它们存储在“公共”文件夹中。

Answer 9

这很简单。

1. 将您的图像添加到/public文件夹。
2. 现在在Image src 中引用该图像位置及其绝对路径，如下所示：

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