Nextjs：无法从静态文件夹加载图像

Question

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

Answer 1

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 (/).

所以，先添加一张图片到public/my-image.png，然后你就可以引用它了：

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

我想 next.js 会监视这个目录，这样您每次在其中放东西时都不需要重新start您的服务器。

Answer 2

我发现的另一种方式Next Images

安装： 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>

Answer 3

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

Answer 4

还有下一个 10+ 要提供优化图像：

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

将图像放在 public 文件夹中。在构建时，所有引用的图像必须存在于 public 文件夹中。图像热部署不适用于驻留在 public 文件夹中的图像。也可以通过<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'],
},

}

Answer 5

我喜欢使用 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 值。

Answer 6

从 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

Answer 7

我将在这里添加一个明显的案例，通常很容易被遗忘。当一个 re-structure 一个站点页面和我们的 IDE “默默地失败”更新相关 file/component 的路径时，或者只是当一个人更累或分心时，它就会不断出现。

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

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

Nextjs：无法从静态文件夹加载图像

Nextjs: Unable to load images from static folder

reactjs

webpack

nextjs