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

【问题标题】：Nextjs: Unable to load images from static folderNextjs：无法从静态文件夹加载图像
【发布时间】：2018-09-01 06:53:05
【问题描述】：

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

【问题讨论】：

标签： reactjs webpack nextjs

【解决方案1】：

from the docs:

Next.js 可以在名为公共在根目录下。然后可以将公共内部的文件由您的代码从基本 URL (/) 开始引用。

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

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

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

【讨论】：

要明确区别，就是不导入，直接在文件中提及
此答案包含折旧内容。请改为关注this documentation。
在尝试将静态图像加载到动态文件时是否有效 - 即/pages/stuff/[id].js 使用根公共文件夹不适用于这些情况
@aliosh 是的，对我来说似乎也是这样
它不适用于 Image 而不是 img

【解决方案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>

【讨论】：

在尝试将静态图像加载到动态文件时是否有效 - 即 /pages/stuff/[id].js 使用根公共文件夹不适用于这些情况
对此我感激不尽。一个爱
这个解决方案唤醒了我。将图像放在“公共”文件夹中即可。但是，如果您保留公用文件夹以外的图像，例如“资产”，那么在 next.config.js 上配置内容将顺利进行。谢谢
当我在图像源中使用 require 语句时，我总是得到 TypeError: src.startsWith is not a function which is a rabbit hole issue。升级 webpack -> 升级 next.js -> webpack 版本不兼容 next.js
@gage Next.js 项目是基于模块的，需要使用import 而不是require。

【解决方案3】：

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

【讨论】：

是的，这行得通，例如我把我的放在 public/static/images/icons/x.svg 中，这适用于我的图像标签 <img src="/static/images/icons/x.svg"/>

【解决方案4】：

接下来 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'],
},

}

【讨论】：

【解决方案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 值。

【讨论】：

【解决方案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

【讨论】：

【解决方案7】：

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

如果您正在使用文件夹内的页面例如：mysiteDomain/pagefolder/page 使用相对路径时应该小心。像<img src="logo.png" /> 这样的东西应该改成<img src="../logo.png" />，因为编译后的页面也会在文件夹pagefolder 中。 src 属性中的路径将相对于编译后的页面。

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

【讨论】：