Django ImageField 不会在网页上显示

Question

我在我的 Django 模型中使用 imageField，当我尝试在 html 中显示照片时无法识别照片。

这是我的 models.py

from django.db import models

class LatestRelease(models.Model):
    title = models.CharField(max_length=50)
    description = models.CharField(max_length=300)
    cover = models.ImageField(upload_to='personal/static/img/')
    display = models.BooleanField(default=True)

这里是view.py

from django.shortcuts import render
from personal.models import LatestRelease

def index(request):
    releases = LatestRelease.objects.all()
    return render(request, "personal/home.html", {'releases': releases})

HTML代码

 {% for release in releases %}
    <img src="{{ release.cover.url }}" class='' height='235' width='235'>
 {% endfor %}

所以基本上，图像路径 {{ release.cover.url }} 是 /personal/static/img/[image name] 当我使用 url 路径 /static/img/[image name] 作为来源时，我的照片才会出现。

是否可以从 {{ release.cover.url }} 创建的字符串中取出 /personal ？或者使我的 img 源接受 /personal/static/img/[image name]?

下的文件

Answer 1

如果您也显示 settings.py 和 urls.py 文件可能会有所帮助，但我猜您的开发服务器未设置为该 personal/static/img/[image name] 文件提供服务。要进行设置，您需要调整 settings.py 和主项目 urls.py 文件。

settings.py:

# Add these
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
MEDIA_URL = "/media/"

MEDIA_ROOT 表示当您的 MEDIA_URL 被点击时（例如当您的浏览器请求该图片时）可以从哪里提供文件。要实际提供您需要设置视图的文件，有一个内置的帮助函数用于在开发中提供这些文件，将其添加到您的主项目 urls.py 文件

urls.py:

from django.conf import settings
from django.conf.urls.static import static


urlpatterns = [
    # your other views
    ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

那么你应该再次上传图片，它会保存在 media/<upload_to>/<picturename>，你的情况是 media/personal/static/img/<picture_name>。你的服务器实际上会知道现在在哪里可以找到它。

查看 documentation 举个更好的例子。

P.S.

您使用的硬编码 url /static/img/[image name] 之所以有效，是因为默认情况下，Django 开发服务器可以提供项目根目录中 static/ 目录中的静态文件作为以及应用程序根目录中的任何 static/ 文件夹。因此，您在 ImageField 中的 upload_to 争论创建了 /personal/static/ 文件夹，这是一种令人愉快的巧合。然后，由于 DEBUG = True 是在 settings.py 中设置的，因此您已设置为自动提供服务。这在上面的链接文档中有描述（更好）。

Django ImageField 不会在网页上显示

Django ImageField will not display on webpage

python

html

django

model

imagefield

P.S.