27

如何在 Next.js 的组件中加载图像？我必须先构建项目吗？如果是，有没有办法在不先构建的情况下加载图像？无论我尝试什么，我都无法让它发挥作用。

4

7 回答 7

42

来自文档：

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

所以，首先添加一个图像public/my-image.png，然后你可以引用它：

<img src="/my-image.png" />

我认为 next.js 将在此目录上进行监视，因此您无需在start每次将内容放在那里时都重新服务器。

于 2018-03-22T17:59:08.360 回答
13

静态目录已被弃用。将文件放入public/static目录

于 2020-01-10T11:53:20.797 回答
12

我找到下一张图片的另一种方法

安装： npm install --save next-images

或者 yarn add next-images

用法：

next.config.js在您的项目中创建一个

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

或者，您可以将自定义 Next.js 配置添加为参数

// next.config.js
const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

在您的组件或页面中，只需导入您的图像：

export default () => <div>
  <img src={require('./my-image.jpg')} />
</div>

或者

import myImg from './my-image.jpg'

export default () => <div>
  <img src={myImg} />
</div>
于 2019-10-25T01:58:54.247 回答
4

从 Next.js v11 开始，现在可以直接import映像，而无需任何额外的配置或依赖项。官方示例（评论我的）：

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image src={profilePic} alt="Picture of the author" />
      {/* <img src={profilePic.src} alt="Picture of the author" /> */}
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home

文件：next/image

于 2021-07-20T10:33:36.653 回答
2

使用 Next 10+ 提供优化的图像：

import Image from 'next/image'
<Image src={'banner.jpg'} alt='Home Page' width={100} height={100} />

将图像放在公用文件夹中。在构建时，所有引用的图像都必须存在于公用文件夹中。映像热部署不适用于位于公用文件夹中的映像。<Image>您还可以引用带有标签的跨域图像。

<Image src={'https://www.example.com/banner.jpg'} alt='Home Page' width={100} height={100} />

要允许跨域图像，请确保将以下条目添加到您的next.config.js

module.exports = {
images: {
    domains: ['www.example.com'],
},

}

于 2021-02-07T18:42:52.873 回答
1

我喜欢针对图像做的事情是使用environment variables. 在 next.js 中，它们很容易在next.config.js如下文件中设置：

// next.config.js

module.exports = {
    env: {
      PUBLIC_URL: '/',
    }
};

process.env.PUBLIC_URL然后您可以使用如下方式定向到您的公共路径：

<img src={`${process.env.PUBLIC_URL}/my-image.jpg`} />

与硬编码路径相比，使用 PUBLIC_URL 环境变量的优势在于，当文件排列发生变化时（例如在服务器中），您可以使用另一个路径。那么您可以有条件地设置在生产和开发中使用哪个 PUBLIC_URL 值。

于 2021-02-07T19:29:26.753 回答
0

我将在这里添加一个明显的案例，它通常很容易被遗忘。当重新构建站点页面并且我们的 IDE “静默失败”以更新相关文件/组件的路径时，或者只是当一个人更加疲倦或分心时，它会不断出现。

如果您在文件夹中使用页面，例如：mysiteDomain/pagefolder/page 使用相对路径时应小心。<img src="logo.png" />应该将其更改为类似的内容，<img src="../logo.png" />因为编译后的页面也将位于文件夹pagefolder中。属性中的路径src将相对于编译页面。

作为替代方案，您可以简单地使用绝对路径，例如 for ex <img src="/logo.png" />。属性中的路径src将相对于站点的编译根目录。

于 2022-02-01T03:07:43.750 回答