Angular部署到iframe中时资源图片加载404问题求助

这种情况我之前做iframe嵌入Angular应用时也踩过坑，核心问题是Angular打包后的资源路径基准和iframe的嵌入环境不匹配，导致相对路径解析出错。下面给你拆解原因和具体解决办法：

为什么会出现这个问题？ #

Angular默认打包时，base href是根目录（/），本地ng serve运行时，资源路径是基于本地服务器的根目录解析的，所以没问题。但当你的应用被嵌入到iframe里时：

• 如果iframe的父页面部署在不同的路径下，或者你的Angular应用本身部署在服务器的子目录中
• 你用的硬编码多层相对路径（比如./../../../../assets/...）会基于父页面的路径去解析，而不是你的Angular应用的根路径，自然就找不到资源，报404。

具体解决步骤 #

1. 改用Angular标准的资源引用方式 #

不要用多层相对路径，直接用相对于assets文件夹的路径，同时确保angular.json里的资源配置正确：

• 模板里的img标签改成：

  <img id="preview" src="assets/transparent-3.png" alt="" class="image-preview-box" />
  

• 检查angular.json的assets配置，确保包含src/assets：

  "architect": {
    "build": {
      "options": {
        "assets": [
          "src/favicon.ico",
          "src/assets" // 这行必须存在，确保assets文件夹被打包到输出目录
        ]
      }
    }
  }
  

2. 配置正确的base href #

这是解决iframe路径问题的关键，分两种场景：

• 场景1：知道应用部署的子路径：打包时指定--base-href参数，比如你的应用部署在服务器的/my-angular-app/路径下，打包命令：

  ng build --prod --base-href "/my-angular-app/"
  

• 场景2：不确定部署路径（通用iframe嵌入）：直接修改src/index.html里的base标签，把href设为相对路径：

  <base href="./">
  

  这样资源会基于当前Angular应用index.html的位置去解析，不管iframe嵌入到哪里，路径都会自动适配。

3. 验证iframe的src路径 #

确保iframe的src是指向你Angular应用打包后index.html的完整正确路径，比如：

<iframe src="/path/to/your/angular/app/index.html"></iframe>

如果src路径不对，也会导致资源解析错误。

4. 调试技巧 #

打开浏览器开发者工具的「网络」标签，查看图片的实际请求路径：

• 如果看到请求的路径是父页面的路径/../../../../assets/...，说明相对路径基于父页面解析了，这时候用base href="./"就能解决。
• 如果请求路径是/assets/...但404，说明你的应用部署在子目录，需要调整base href为子路径。

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