django-rest 和 angular nginx 加载静态图像问题答案

【问题标题】：django-rest and angular nginx load static image issuedjango-rest 和 angular nginx 加载静态图像问题
【发布时间】：2018-12-17 19:52:02
【问题描述】：

您好，我正在尝试使用 nginx 加载我的 Angular 应用程序，除了作为模板一部分的静态图像（保存在上传文件夹中的产品图像还可以）之外，一切正常这是setting.py的相关代码：

MEDIA_URL = '/upload/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'upload')


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

PROJECT_ROOT = os.path.dirname(os.path.dirname((__file__)))
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'staticfiles')
STATIC_URL = '/static/'

# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
    os.path.join(PROJECT_ROOT, 'static'),
)

# Simplified static file serving.
# https://warehouse.python.org/project/whitenoise/

STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'

这是我在 /static/ 文件夹中的索引文件：

{% load static %}
<!DOCTYPE html>
<html lang="fa" id="persain">
<head>
    <meta charset="utf-8">
    <title>M4new</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="{% static 'styles.4bdc8f4141f772a8814a.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.159b545905e86c2df1d4.js' %}"></script>
</body>
</html>

我的静态目录是这样的：

我的结果：

如您所见，图片无法加载，因为它们在 url 的开头丢失了静态关键字。

我尝试了Python manage.py collectstatic 并添加了

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

到我的网址的结尾，但没有任何改变....对这个问题有什么想法吗？谢谢

更多信息： nginx 配置：

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip  on;

    server {
        listen       80;
        server_name  localhost;


      location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/mohammadreza/PycharmProjects/ac2/academy/academy;
    }

    location / {
        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;
    add_header Access-Control-Allow-Origin *;
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Access-Control-Allow-Orgin,XMLHttpRequest,Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With';
        proxy_pass http://unix:/home/mohammadreza/PycharmProjects/ac2/academy.sock;
    }

注意：我在 gunicorn 也有同样的问题。

【问题讨论】：

也添加你的 Nginx 配置，以及失败图像的 url（带有 firebug 或类似的东西）
我添加了 nginx 配置。您可以在我的帖子检查中的 socond 图像中看到失败的图像 url，检查我在哪里写了“我的结果”.. 我认为这个问题与 nginx 无关，因为我也有 gunicorn 的这个问题

标签： django django-rest-framework django-staticfiles static-files

【解决方案1】：

您应该将您的网址更改为static 返回正确的网址

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

并将STATIC_ROOT 更改为static

目前，您的项目生成的 URL 错误，应该将它们替换为 /static.file 到 /static/static.file

通过上述解决方案，我认为您可以解决问题

【讨论】：