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

Posted

技术标签:

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

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

【问题讨论】:

【参考方案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 中,这适用于我的图像标签 &lt;img src="/static/images/icons/x.svg"/&gt;【参考方案4】:

接下来 10+ 提供优化的图像:

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

将图像放在公用文件夹中。在构建时,所有引用的图像都必须存在于公用文件夹中。映像热部署不适用于位于公用文件夹中的映像。 也可以使用&lt;Image&gt;标签引用跨域镜像。

<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  />
      /* <img src=profilePic.src  /> */
      <p>Welcome to my homepage!</p>
    </>
  )


export default Home

文档:next/image

【讨论】:

【参考方案7】:

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

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

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

【讨论】:

以上是关于Nextjs:无法从静态文件夹加载图像的主要内容,如果未能解决你的问题,请参考以下文章

Django静态图像文件无法加载资源

Webview中的iOS静态图像加载

静态文件不再加载 - Django

Django:无法从 DigitalOcean Droplet 上的模板加载静态文件

媒体文件未在模板中正确加载 (HTML <img>)。静态文件/图像正常工作

在静态文件中加载图像