Django 上传的图像未在生产中显示

Question

我知道这个问题：Django Uploaded images not displayed indevelopment，我已经完成了它所描述的一切，但仍然找不到解决方案。我还参考了这个：GeeksForGeeks和上传的文件和上传的处理程序 - Django 文档，但是，它们都没有解决我的问题。

我第一次使用 Nginx 和 Gunicorn 在 Ubuntu 服务器上部署了 Django 应用程序。在部署之前，我使用端口 8000 来测试一切是否按预期运行并且一切正常。由于我允许“Nginx Full”，我的数据库图像没有显示。

这是我的 Django 项目结构：

我的虚拟环境文件夹和我的主项目文件夹都在同一目录中。我已经把他们分开了。

# Create your models here.
class Project(models.Model):
    project_name = models.CharField(max_length=120)
    project_description = models.CharField(max_length=400)
    project_link = models.CharField(max_length=500)
    project_image = models.ImageField(upload_to='')

    def __str__(self):
        return self.project_name

我已将 settings.py 设置为：

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')


MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(os.path.dirname(__file__), '..', 'media').replace('\\','/')

我的视图从数据库获取所有项目对象并将其传递给模板。该模板成功呈现了除图像字段之外的与项目模型相关的所有其他信息。在我的模板中我这样做：

 <div class="row text-center mx-auto">

        {% for project in projects %}
        {% if forloop.counter|mod:2 == 0 %}
        <div class="col projects pb-3 pt-3 mb-3 ml-2">
          {% else %}
          <div class="col projects pb-3 pt-3 mb-3 mr-2">
            {% endif %}

            <img class="card-img-top pt-2 pl-2 pr-2" src="{{ project.project_image.url}}"
              alt="Image could not be found :(" style="height:120px; width:166px !important;" /><br>
            <div class="card-body">
              <h3 class="card-title ">{{ project.project_name }}</h3>
              <p class="card-text dates">{{ project.project_description}}</p>
              <a href="{{ project.project_link }}" class="btn btn-dark" target="_blank">Link</a>

            </div>
          </div>

          {% if forloop.counter|mod:2 == 0 %}
          <div class="w-100"></div>
          {% endif %}
          {% endfor%}
        </div>
      </div>

上传图像有效，它将它们发送到项目的媒体目录中，问题是它们没有显示，alt="" 被激活。

我的主要 urls.py：

urlpatterns = [
     path('', include('project.urls')),
    path('admin/', admin.site.urls),
]  + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Gunicorn系统文件：

[Unit]
Description=gunicorn daemon
After=network.target

[Service]
User=myusername
Group=www-data
WorkingDirectory=/home/myusername/myproject
ExecStart=/home/myusername/venv/bin/gunicorn --access-logfile - --workers 3 --bind unix:/home/myusername/myproject/myproject.sock myproject.wsgi:application

[Install]
WantedBy=multi-user.target

Nginx 设置：

  server {
        listen 80;
        server_name <my IP> ;
        location = /favicon.ico { access_log off; log_not_found off; }
        location /static/ {
            root /home/myusername/myproject;
        }
        location / {
            include proxy_params;
            proxy_pass http://unix:/home/myusername/myproject/myproject.sock;
        }
    }

编辑：当检查网页的图像元素时，图像的来源是“/media/imageNmae.png”。任何帮助，将不胜感激！

编辑：解决方案已经找到，Nginx 没有像 Daniel 所建议的那样为媒体提供服务。有一些 uWSGI 文档值得阅读，以避免进一步出现类似 问题

Answer 1

您的 Nginx 不为MEDIA_URLie提供服务/media/。你需要一个像你一样的 Nginx 配置部分/static/

  server {
        listen 80;
        server_name <my IP> ;
        location = /favicon.ico { access_log off; log_not_found off; }
        location /static/ {
            root /home/myusername/myproject;
        }
        location /media/ {
            root /home/myusername/myproject;
        }
        location / {
            include proxy_params;
            proxy_pass http://unix:/home/myusername/myproject/myproject.sock;
        }
    }