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

Question

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

Answer 1

从文档：

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

因此，首先将图像添加到public/my-image.png ，然后您可以引用它：

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

我认为 next.js 会对这个目录有一个监视，所以你每次在那里放东西时都不需要重新start你的服务器。

Answer 2

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

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

使用 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'],
},

}

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

您可以通过多种方式在 Next.js 中加载图像。

#1. 本地图片

假设您的public目录中有一张图片，名称为your_image_name.jpg

您可以使用以下代码渲染图像。

import Image from 'next/image'
import YourImage from '../public/your_image_name.jpg'

export default function AppLayout(){
  return (
    <>
        <h2>Hello World</h2>
        <Image
            src={YourImage}
            alt="Awesome image"
            ...
        />
    </>
  )
}

#2. 远程图像

您将使用外部图像，例如您的公共网站目录或第三方网站。

import Image from 'next/image'

export default function AppLayout() {
  return (
    <>
      <h2>Hello World</h2>
      <Image
        src="https://images.pexels.com/photos/792199/pexels-photo-792199.jpeg?crop=entropy&cs=srgb&dl=pexels-nao-triponez-792199.jpg&fit=crop&fm=jpg&h=427&w=640"
        alt="Awesome Images"
        width={500}
        height={500}
        ...
      />
    </>
  )
}

不要忘记在主目录中创建一个新文件next.config.js 。 在示例中，您遵循配置。

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

这个对我有用。

对于许多选项，您可以阅读Next.js 文档。

谢谢 ：）

Answer 8

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

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

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

Answer 9

不要将public放入/src ！

就我而言，我有一个src目录，我将pages等放入其中，这是此处描述的一个选项。 但我也意外地将public目录移到了那里。 这会使 nextjs 变得混乱——您需要在根目录中public 。

Answer 10

在运行next build && next export并且您的图像不可见后，请执行以下操作：

// next.config.js
/** @type {import('next').NextConfig} */

module.exports = {
  reactStrictMode: true,

  images: {
    loader: "custom",
    loaderFile: "./imageLoader.js",
  },

  assetPrefix: "./",

  env: {
    // dev does not need static path
    ROOTDIR: process.env.NODE_ENV === "development" ? "" : "file:///C:/Users/.../out",
  },
};

在根项目中也创建一个 imageLoader.js

export default function imageLoader({ src, width, quality }) {
  return `process.env.NODE_ENV === "development" ? "" : "file:///C:/Users/.../out${src}?w=${width}?q=${quality || 75}`;
}

其中file:///C:/Users/.../out指的是构建根目录的完整路径

现在你可以在“/*”之前的 append process.env.ROOT