NextJS中使用eval动态引用图片变量出现ReferenceError错误

你遇到的报错是因为Next.js的模块作用域限制，导入的变量并非全局可访问，eval在运行时找不到对应的linkedin变量。下面是直接可行的解决办法：

用映射对象管理导入的图片 #

1. 先将导入的图片存入一个键值对对象，键名和data.socials里的键保持一致：

import linkedin from "../public/images/linkedin.webp";
// 后续新增其他社交平台图片时，导入后直接添加到这个对象里
const socialImages = {
  linkedin: linkedin
};

2. 遍历data.socials时，直接从映射对象中取值：

const socialButtons = [];

for (const key of Object.keys(data.socials)) {
  socialButtons.push(
    <Image
      src={socialImages[key]}
      width={48}
      height={48}
      alt={key} // 用key作为alt文本更贴合实际场景
    />
  );
}

额外提醒 #

• 绝对不要用eval处理这类场景，除了作用域问题，它还存在安全风险和性能损耗。
• 如果需要动态加载大量未知图片，可以考虑Next.js的import()动态导入方案，但对于已知的静态图片，映射对象是最简洁高效的方式。

内容的提问来源于stack exchange，提问作者Shourya Shikhar