Next.js 中无法通过 require() 动态加载 public 目录下的 SVG 文件，需改用绝对路径（如 /icons/zavod.svg）配合 组件直接引用，确保资源在构建时被正确托管并可被浏览器访问。
next.js 中无法通过 `require()` 动态加载 `public` 目录下的 svg 文件，需改用绝对路径（如 `/icons/zavod.svg`）配合 `
在 Next.js 应用中，public 目录是静态资源的“根发布目录”——所有存放在其中的文件（如 SVG、PNG、JSON 等）都会在构建后直接映射到应用的 URL 根路径下（例如 public/icons/zavod.svg → 可通过 /icons/zavod.svg 访问）。因此，不能使用 require() 或相对路径导入 public 下的资源，尤其当路径来自动态变量（如 button.icon）时，Webpack 无法在编译期解析该模块，导致运行时报错：Cannot find module '...'。
✅ 正确做法是：
- 将图标路径统一改为以
/开头的绝对路径（即相对于public目录的路径）； - 在
require）； - 确保
src值为有效静态字符串（Next.js 的src必须是静态可分析路径或StaticImport类型，动态require()不满足此约束）。
以下是修正后的关键代码示例：
jm-jsjkxyjs02-zlm-405
下载
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
// ✅ 正确：使用绝对路径，不调用 require()
const compButtonsArray = [
{ icon: '/icons/zavod.svg', label: 'Label 1', transitionDelay: '0s', countBtn: 'discord-button' },
{ icon: '/icons/gazprom.svg', label: 'Label 2', transitionDelay: '0.1s', countBtn: 'twitter-button' },
{ icon: '/icons/ya.svg', label: 'Label 2', transitionDelay: '0.2s', countBtn: 'reddit-button' },
];
// ✅ 正确：直接传入字符串路径
<image src="%7Bbutton.icon%7D" alt="{button.label}" width="{30}" height="{30}" classname="{styles.button_logo}"></image>
⚠️ 注意事项：
-
路径必须以
/开头：/icons/zavod.svg是正确的；./icons/zavod.svg或../../../public/icons/zavod.svg均无效； -
不要混用
require()和require()适用于模块导入（如 React 组件或 JSON），二者语义与处理时机不同； -
SVG 文件需真实存在于
public/icons/下：检查文件大小写、扩展名（.svg）、拼写是否完全一致（Linux 环境区分大小写）； - 若需更灵活的图标管理（如主题切换、动态颜色），可考虑将 SVG 转为 React 组件（
import ZavodIcon from '@/icons/zavod.svg'），但需配置@svgr/webpack插件 —— 本场景推荐优先使用public+ 绝对路径方案，简洁可靠、零配置。
总结：Next.js 的 public 目录即静态服务根目录，所有资源应通过 /xxx 形式直接引用。摒弃 require() 动态加载思维，拥抱约定优于配置的设计哲学，即可彻底解决图像不显示问题。
