我无法在 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';

我收到以下错误

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)

我尝试执行以下操作

在下-config.js

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

我仍然遇到同样的错误。

我做错了什么？

Answer 1

请看 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

至少在我们的项目中，我们对图像使用 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-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 5

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

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

如果您的代码在 src 目录下，即 <app-name>/src/pages , <app-name>/src/components, ... 那么您的 public 文件夹必须在 src 目录之外。 Public 文件夹不能在 src 下，因为 <app-name>/src/public. 在这种情况下，您的 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

参考文献：

Answer 6

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

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

<Image src={macbookIphone} />

// or

<img src={macbookIphone.src} />

参考：next/image

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

Answer 7

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

作者图片

我无法在 Next.js 中引用图片

I can't reference an image in Next.js

javascript

reactjs

next.js