Next.js中引入本地HTML交互地图（iframe）失败问题求助

问题原因分析 #

1. iframe路径错误：Next.js的public文件夹是静态资源的根目录，访问时无需带上../../public，相对路径会导致资源找不到。
2. fetch本地文件的错误用法：fetch API仅支持HTTP(S)请求，无法直接读取本地文件路径，这是你收到Failed to parse URL错误的核心原因。

解决方案 #

方案1：修正iframe路径（最简单推荐） #

直接将iframe的src改为基于根目录的路径——public下的资源会被部署到网站根目录，无需额外路径前缀：

<FlexContent gap="16" justify="space-between">
  <iframe 
    src="/assets/maps/cityMap.html" 
    frameborder="0"
    style={{ width: '100%', height: '600px' }} // 建议添加宽高样式确保地图正常显示
  ></iframe>
</FlexContent>

方案2：读取HTML内容直接渲染（无需iframe） #

如果不想用iframe，可以通过Node.js的fs模块读取本地HTML文件内容，再用dangerouslySetInnerHTML渲染：

import fs from 'fs';
import path from 'path';

export const getStaticProps = async () => {
  // 拼接项目根目录到目标HTML文件的完整路径
  const filePath = path.join(process.cwd(), 'public', 'assets', 'maps', 'cityMap.html');
  // 读取文件内容（utf8编码）
  const htmlContent = fs.readFileSync(filePath, 'utf8');

  return {
    props: { htmlContent },
  };
};

export default function MapPage({ htmlContent }) {
  return (
    <FlexContent gap="16" justify="space-between">
      {/* 直接渲染HTML内容 */}
      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
    </FlexContent>
  );
}

注意：使用dangerouslySetInnerHTML时要确保HTML文件是可信的，避免注入恶意脚本。

内容的提问来源于stack exchange，提问作者Fernando Sosa