django angular 加载静态文件 - 资产文件夹中的图像得到 404

Question

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

我构建我的 angular 应用程序并将所有文件放入静态文件夹，在 nginx 中我将其指向从静态文件夹加载，在模板中的 django 中我使用 index.html 加载静态文件，例如以下：现在我的应用程序将运行但没有像 angular 中的“../../../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;
    }
}

Answer 1

您似乎在询问如何处理 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/

Answer 2

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

此外，不要在 html 文件中添加散列值（对于 css 和 js），因为它必然会发生变化。在捆绑器配置中使用 hashing false。

Answer 3

你的问题是 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

Answer 4

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

在您的 angular 应用中 src/environments 下有两个打字稿文件 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

Answer 5

我对 Angular 和 Django 也有同样的问题。我的可修复解决方案是 @Devesh Pradhan 提供的解决方案。

export const environment = {
  production: true,<br>
// Custom path in my exemple.<br>
  djangoStaticpath: '/static/angular/images/'
};

所以我为production env定义了一个路径，而在develpment env上只是一个空字符串。第二个技巧是使用 Angular 样式绑定在 html 中添加背景图像。

"<div [style.background-image]="'url(' + imgSrc + 'test.png)'"></div>"

这里的imgSrc是component.ts.

中导入的djangoStaticpath值

django angular 加载静态文件 - 资产文件夹中的图像得到 404

django angular load static files - image in assets folder get 404

django

nginx

django-staticfiles

angular