Question

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

Answer 1

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

Answer 2

只需将您的文件放在static目录中，然后您就可以在应用中引用它们，如：

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

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

但是当然你的生产版本会更新。每次更改应用中的内容时，您都需要build。

Answer 3

我找到Next Iamges

的另一种方法

安装： 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 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'],
},

}

Answer 5

我喜欢使用 next.config.js 来定向图像。在 next.js 中，它们很容易设置在 // next.config.js module.exports = { env: { PUBLIC_URL: '/', } }; 文件中，如下所示：

process.env.PUBLIC_URL

然后您可以使用如下所示的 <img src={`${process.env.PUBLIC_URL}/my-image.jpg`} /> 直接访问您的公共路径：

class Client(models.Model):
    input_data = models.CharField(max_length=100)

    # The field that will be computed in the background task
    computed_data = models.CharField(max_length=100, null=True, blank=True)

使用 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

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

6 个答案: