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

Posted 2023-03-30

【中文标题】我无法在 Next.js 中引用图像

【英文标题】：I can't reference an image in Next.js

【发布时间】：2021-12-14 15:22:56

【问题描述】：

我有一个在 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()

我仍然遇到同样的错误。

我做错了什么？

【问题讨论】：

为什么需要导入？你就不能<img src='../../assets/images/mac-iphone.jpg' />吗？

【参考方案1】：

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

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

【讨论】：

你好。您知道如何将 Public 文件夹中的内容放入动态页面，即 dynamic[id].js 吗？

【参考方案2】：

/public/favicon/mail.png

=> "/favicon/mail.png" 可以工作

【参考方案3】：

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

尝试以下方法，看看是否有帮助：

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

然后你可以像这样使用你的图片作为源代码：

<img src=macbookIphone/>

【讨论】：

你好。您知道如何将 Public 文件夹中的内容放入动态页面，即 dynamic[id].js 吗？

不幸的是它没有用。似乎没有任何效果。

【参考方案4】：

从 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。

【讨论】：

如果您想使用 Markdown 风格的图片，请查看 following answer

发现这篇文章对您有帮助：noahflk.com/blog/next-image-optimization

感谢这对我有用。

【参考方案5】：

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

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

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

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

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

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

或

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

<Image src=sampleImage   />

如果您在 public/sample-image.png

下有一个文件

如果你有图片 URL，直接提供给 'src' 属性。

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

参考资料：

https://nextjs.org/docs/basic-features/static-file-serving https://nextjs.org/docs/api-reference/next/image https://nextjs.org/docs/basic-features/image-optimization https://nextjs.org/docs/advanced-features/src-directory

【参考方案6】：

您可以使用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

【参考方案7】：

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

【讨论】：

专业提示：您可以添加代码围栏来格式化代码