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

Question

我知道这个问题：Django Uploaded images not displayed in development , I have done everything that it is described, but still can't find a solution. I also have used for reference this: GeeksForGeeks and Uploaded Files and Uploaded Handlers - Django documentation，但是，none 解决了我的问题。

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

Answer 1

您可能需要运行此命令： python manage.py collectstatic 来自您平台的 shell 如果你使用的是 heroku，这里是命令

heroku run python manage.py collectstatic

Answer 2

您的 Nginx 不支持 MEDIA_URL，即 /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;
        }
    }

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

Django Uploaded images not displayed in production

django

ubuntu

production