Categories: Next.js教程

Next.js教程基本特性:静态文件服务

Next.js 支持将静态文件(例如图片)存放到根目录下的 public 目录中,并对外提供访问。public 目录下存放的静态文件的对外访问路径以 (/) 作为起始路径。

例如,如果你添加了一张图片到 public/me.png 路径,则以下代码就能访问到此图片:

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

export default Avatar

注意: next/image 需要 Next.js 10 或更新版本。

此文件夹还可用于存放 robots.txtfavicon.icoGoogle 站点验证文件以及任何其它静态文件(包括 .html 文件)!

注意: 请勿为 public 改名。此名称是写死的,不能修改,并且只有此目录能过够存放静态资源并对外提供访问。

注意: 请确保静态文件中没有与 pages/ 目录下的文件重名的,否则这将导致错误。

更多信息: http://err.sh/next.js/conflicting-public-file-page

注意:只有放在 public 目录下的静态资源才能在 构建时 由 Next.js 找到。在运行时添加的文件不可用。我们建议使用第三方服务,例如 AWS S3 来持久地存储文件。

terry

这个人很懒,什么都没有留下~

Share
Published by
terry

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

5 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

2 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

3 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

3 周 ago