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
中,这适用于我的图像标签 <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 />
/* <img src=profilePic.src /> */
<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
属性中的路径将相对于站点的编译根目录。
【讨论】:
以上是关于Nextjs:无法从静态文件夹加载图像的主要内容,如果未能解决你的问题,请参考以下文章
Django:无法从 DigitalOcean Droplet 上的模板加载静态文件