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

Question

我知道这个问题:Django Uploaded images not displayed in development ，我已经完成了它描述的一切，但仍然找不到解决方案。我也引用了这个:GeeksForGeeks和 Uploaded Files and Uploaded Handlers - Django documentation ，但是，他们都没有解决我的问题。

我第一次使用 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('\\','/')

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

 <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 没有像丹尼尔建议的那样为媒体提供服务。有一些 uWSGI 文档值得一读以避免更多类似问题 Documentation

Answer 1

您的 Nginx 未提供 MEDIA_URL 即 /media/。您需要像 /static/

这样的 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 /media/ {
            root /home/myusername/myproject;
        }
        location / {
            include proxy_params;
            proxy_pass http://unix:/home/myusername/myproject/myproject.sock;
        }
    }