news 2026/5/1 14:23:33

React——Next.js 静态资源与 public 目录详解

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
React——Next.js 静态资源与 public 目录详解

问题场景

部署 Next.js 应用后,发现所有图片都显示不出来,页面上一片空白图标。本地开发明明是好的,为什么部署后就不行了?

理解 Next.js 的构建产物

Next.js 使用output: 'standalone'模式构建时,会生成一个独立的部署包:

.next/ └── standalone/ ← 部署包 ├── server.js ← 启动文件 ├── node_modules/ ← 精简的依赖 └── .next/ ← 编译后的代码

问题来了public目录和.next/static目录不会自动包含进去!

public 目录是什么?

public目录用于存放静态资源,如图片、字体、favicon 等:

project/ ├── public/ │ ├── images/ │ │ ├── logo.png │ │ └── banner.jpg │ ├── fonts/ │ │ └── custom.woff2 │ └── favicon.ico └── src/

在代码中可以直接用根路径引用:

// 引用 public/images/logo.png <img /> // 引用 public/favicon.ico <link />

为什么部署后图

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/25 11:06:20

电子签章行业风险评估:安全、合规与市场挑战

随着数字化和互联网的发展&#xff0c;各行各业越来越多针对C端用户的互联网企业活跃于市场之上&#xff0c;对传统企业带来了不可估量的冲击&#xff0c;其中自然也包括电子签章行业。下面就互联网电子签章公司在实际使用过程中可能存在的风险进行相关的分析&#xff1a;这些风…

作者头像 李华
网站建设 2026/4/28 6:49:00

GitHub Secrets存储PyTorch项目敏感信息

安全高效的PyTorch项目实践&#xff1a;GitHub Secrets与容器化环境的融合之道 在AI项目开发中&#xff0c;一个看似不起眼的.env文件可能隐藏着足以让整个系统陷入危机的安全隐患。你是否曾因误提交包含数据库密码的配置文件而彻夜难眠&#xff1f;又或者因为本地CUDA版本和服…

作者头像 李华
网站建设 2026/5/1 10:11:55

智能体普及元年:2026CIO如何规划IT架构

站在新的历史坐标上&#xff0c;“十五五规划”的蓝图正徐徐展开&#xff0c;“人工智能”行动持续向纵深推进。对企业而言&#xff0c;AI已不再是前沿概念&#xff0c;而是重塑组织效率、业务模式与核心竞争力的关键变量。2026年被视为“智能体普及元年”&#xff0c;CIO也站在…

作者头像 李华
网站建设 2026/4/23 12:23:32

收藏必备!从小白到专家:大模型提示词工程完全指南

本文是一份关于AI提示词工程的全面指南&#xff0c;介绍了提示词的定义、重要性及核心要素&#xff08;角色、背景、任务、输出&#xff09;&#xff0c;详细讲解了多种实用技巧如角色扮演、范例提供、迭代优化等&#xff0c;并探讨了功能性提示词和行业级提示词的构建方法。文…

作者头像 李华
网站建设 2026/4/29 20:38:05

程序员必看收藏!6大AI开源项目助你快速入门大模型开发

文章精选6大AI开源项目&#xff1a;GLM-4.7展现强大编程能力&#xff1b;分布式框架exo利用闲置设备搭建AI集群&#xff1b;Vibe Coding教程系统化学习AI编程&#xff1b;VideoPipe提供轻量级视频分析方案&#xff1b;Personal AI Infrastructure助力构建个人AI系统&#xff1b…

作者头像 李华