django 角度加载静态文件 - 资产文件夹中的图像获取 404答案

【问题标题】：django angular load static files - image in assets folder get 404django 角度加载静态文件 - 资产文件夹中的图像获取 404
【发布时间】：2018-12-27 21:56:55
【问题描述】：

我在 angular src 文件夹中有一个 assets/image 文件夹，我将所有图像都留在那里，我有许多组件和子组件正在使用这些图像，例如 <img src"../../../assets/image/test.png">，

我构建了我的 Angular 应用程序并将所有文件放到静态文件夹中，在 nginx 中我指向它从静态文件夹中加载，在模板中的 django 中我使用 index.html 来加载静态文件，如下所示：现在我的应用程序将运行，但在角度加载中没有地址像“../../../file”的文件都得到 404：

http://hello.com/bird.65c8b9bce67b6a965a9c.png (error 404)

如果我在地址前面放一个静态关键字，例如http://hello.com/static/bird.65c8b9bce67b6a965a9c.png 图像将加载.. 我该如何处理这个问题？

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title> site </title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="{% static 'favicon.png' %}">
<link rel="stylesheet" href="{% static 'styles.921a613cd46f44e0d5a0.css' %}"></head>
<body>
  <app-root>Loading .  .  .</app-root>
<script type="text/javascript" src="{% static 'runtime.6afe30102d8fe7337431.js' %}"></script>
<script type="text/javascript" src="{% static 'polyfills.b0205464c9bd4e7fe3b3.js' %}"></script>
<script type="text/javascript" src="{% static 'scripts.59ed76cc23ba77b0ec72.js' %}"></script>
<script type="text/javascript" src="{% static 'main.08947dd689f13d4027ea.js' %}"></script>
</body>
</html>

我也添加了

urlpatterns += static(base.STATIC_URL, document_root=base.STATIC_ROOT) + \
               static(base.MEDIA_URL, document_root=base.MEDIA_ROOT)

到我的 urls.py 结尾，我运行 python manage.py collectstatic

nginx 服务器：

server {
    listen 80;
    server_name hello.com;
    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/vertical/academy;
    }

    location / {
        include proxy_params;
       #proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://unix:/home/vertical/academy/academy.sock;
    }
}

【问题讨论】：

标签： django angular nginx django-staticfiles

【解决方案1】：

一种解决方案是使用 Angular 的环境变量。

在 src/environments 下的 Angular 应用中有两个打字稿文件 environment.ts 和 environment.prod.ts。您可以在这些文件中定义从开发环境到生产环境不同的变量。

因此您可以将图像源添加为打字稿字符串，例如

<img [src]="imageURL" alt="my_image">

并将 TS 文件中的 imageURL 定义为

//environments/environment is replaced with environments/environment.prod on ng build --prod
import { environment } from '../../environments/environment'

//staticURL is '' in environment.ts and '/static/' in environment.prod.ts
imageURL = environment.staticURL + 'assets/images/myimage.png'

您可以了解更多关于环境变量here

【讨论】：

【解决方案2】：

您的问题是 Angular 将资源指向 Django 的根目录。

你需要给ng bulid命令指定resourcesOutputPath参数：

ng build --output-path /path-to-django-app/static --resources-output-path static

所以它将指向http://hello.com/static/bird.65c8b9bce67b6a965a9c.png 而不是http://hello.com/bird.65c8b9bce67b6a965a9c.png

请注意，资源输出路径是相对于输出路径的。

请参阅此处的选项部分：https://angular.io/cli/build

【讨论】：

【解决方案3】：

最好的解决方案是在窗口对象中传递静态文件夹 url，通过 typescript 访问它。为窗口对象创建服务。这样您就可以轻松访问应用程序中任何组件中的数据。

另外，不要在 html 文件（用于 css 和 js）中添加哈希值，因为它必然会改变。在捆绑器配置中使用散列 false。

【讨论】：

【解决方案4】：

您似乎在问如何处理 Django 对静态文件的预期行为。 http://hello.com/bird.65c8b9bce67b6a965a9c.png 处的文件出现 404 错误的原因是该 URL 中不存在该文件。 Django 提供来自/static/ 子域的所有静态文件，或者您可以在settings.py 中使用STATIC_URL 定义的不同名称的子域。

以下是相关文档： https://docs.djangoproject.com/en/2.0/howto/static-files/

【讨论】：