Angular 5构建后图片加载异常，Django部署添加zone.js依赖未解决

看起来你在把Angular 5应用部署到Django上时遇到了图片加载失败的问题，虽然已经添加了zone.js依赖，但这个问题大概率和资源路径配置有关，和zone.js关系不大。我帮你梳理几个常见的排查和解决方向：

1. 检查Angular构建时的资源路径配置 #

Angular 5使用的是.angular-cli.json（注意不是Angular 6+的angular.json），你需要确保assets数组里包含了存放图片的目录，这样构建时才会把图片复制到dist文件夹里：

{
  "apps": [
    {
      "assets": [
        "assets",
        "favicon.ico"
        // 如果你的图片在其他目录，比如src/images，也要加在这里
      ]
    }
  ]
}

另外，构建时要指定正确的--base-href参数，匹配Django的静态文件路径。比如如果你的Django静态路径是/static/angular/，构建命令应该是：

ng build --prod --base-href /static/angular/

这样Angular生成的所有资源引用都会以这个路径为基础，和Django的静态配置对齐。

2. 确认Django的静态文件配置是否正确 #

首先把Angular构建后的dist目录文件复制到Django的静态文件夹（比如static/angular/），然后在settings.py里配置好静态路径：

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
# 确保INSTALLED_APPS里包含django.contrib.staticfiles

在Django模板中加载Angular的index.html时，要替换Angular生成的资源路径，用Django的{% static %}模板标签生成正确URL：

<link rel="stylesheet" href="{% static 'angular/styles.xxxxxx.css' %}">
<script src="{% static 'angular/runtime.xxxxxx.js' %}"></script>

不要直接复用Angular生成的index.html里的路径，因为那些路径是基于--base-href的，需要适配Django的静态规则。

3. 检查Angular组件中引用图片的方式 #

在Angular组件里引用图片时，要使用相对路径或基于assets的路径，避免绝对路径：

<!-- 正确的写法 -->
<img src="./assets/images/logo.png" alt="Logo">
<!-- 或者 -->
<img src="assets/images/logo.png" alt="Logo">

如果用了绝对路径（比如/assets/images/logo.png），在Django部署时可能会因为静态路径不是根目录而找不到资源。

4. 清除浏览器缓存或启用资源哈希 #

浏览器缓存旧的资源路径也可能导致加载失败，你可以直接清除浏览器缓存，或者构建时添加哈希参数避免缓存问题：

ng build --prod --base-href /static/angular/ --output-hashing all

这个参数会给每个资源文件加上唯一哈希值，确保浏览器加载最新的构建文件。

5. 验证静态文件是否可直接访问 #

你可以直接访问Django的静态文件URL，比如http://your-domain/static/angular/assets/images/logo.png，如果图片无法显示，说明Django的静态配置有问题，或者图片没有被复制到正确的静态目录里。

如果以上步骤都试过还是不行，你可以把.angular-cli.json的assets配置、Django的settings.py静态配置，以及模板里的资源引用代码贴出来，这样能更精准地定位问题。

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