部署Angular静态网站至GoDaddy后图片无法加载求助

我自己部署Angular项目到GoDaddy Plesk时也踩过assets加载失败的坑，下面是几个经过验证的排查和修复步骤：

Angular的base href决定了资源的基础路径，这是最常见的问题根源：

• 如果你的网站部署在域名根目录（比如https://yourdomain.com/），重新构建时要加上明确的base href参数：

  ng build --prod --base-href /
  

• 如果是部署在子目录（比如https://yourdomain.com/my-app/），则改为：

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

  构建完成后重新上传dist文件夹里的所有文件到服务器。

GoDaddy的服务器基于Linux，文件名和路径是区分大小写的！比如你代码里写的是assets/images/header.png，但上传的文件夹是Assets/Images/Header.png，就会导致加载失败：

• 核对本地Angular代码中引用assets的路径，和dist文件夹里的实际路径大小写完全一致
• 登录Plesk面板，检查上传的assets文件夹及内部文件的大小写，确保和代码引用一致

权限不足会导致服务器无法读取assets文件，按照以下步骤设置：

• 登录Plesk，进入你的网站文件管理器
• 右键点击assets文件夹，选择「Change Permissions」
• 设置文件夹权限为755，内部文件权限为644（这是Linux静态文件的标准权限配置）

有时候angular.json里的配置会导致build时没有正确复制assets文件：

• 打开项目根目录的angular.json文件
• 找到architect -> build -> options -> assets节点，确认包含了src/assets，示例配置如下：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ],
  

  如果有自定义的assets目录，也要确保在这里添加，之后重新执行ng build --prod

确保你把dist文件夹里的所有内容直接上传到了Plesk指定的「Document Root」目录下：

• 在Plesk的网站设置里找到「Document Root」（通常是httpdocs或public_html）
• 检查文件结构：应该是httpdocs/index.html、httpdocs/assets/、httpdocs/main.xxxx.js，而不是把dist文件夹整个嵌套进去（比如httpdocs/dist/index.html）

按照这些步骤逐一排查，应该能解决assets加载失败的问题。

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