以 HTML 格式显示上传的图像 - DJANGO答案

【问题标题】：Display uploaded images in HTML - DJANGO以 HTML 格式显示上传的图像 - DJANGO
【发布时间】：2020-05-02 17:17:43
【问题描述】：

我正在尝试在我的 HTML 中显示用户上传的图像。我会设置以下内容：

设置：

MEDIA_URL = '/media/'
MEDIAFILES_DIRS = []
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

将模型内的文件上传到目录：

class Artikel(models.Model):
    artikel_pic = models.ImageField(upload_to='assortiment/images/', blank=True, verbose_name="Afbeelding")

网址：

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

Views.py：

class AssortimentView(TemplateView):
    template_name = "assortiment/assortiment.html"

    def get(self, request):
        artikel = Artikel.objects.all()
        context_artikel = { 'artikel': artikel}
        return render (request, self.template_name, context_artikel)

当我在管理面板中打开图像时给出的网址： http://127.0.0.1:8000/media/assortiment/images/choco_ijs.jpg 它在这里正确显示。

需要显示图片的html代码：

    {% for art in artikel %}
      <div class="col-sm-2">
        <div class="card" >
          <img class="card-img-top" src="{{MEDIA_URL}}/images{{ artikel_pic.url }}" alt="{{art.artikel_naam}}">
          <div class="card-body">
            <h5>{{ art.artikel_naam }}</h5>
            <p class="card-text">{{ art.artikel_omschrijving }}</p>
          </div>
            <div class="row mr-auto">
                <div class="col-8">
                  <button type="submit" href="#" class="btn btn-info" id="button-assortiment-info">info </button>
                </div>
                <div class="col-4">
                  <button type="submit" href="#" class="btn btn-primary" id="button-assortiment-add">+</button>
                </div>
            </div>
        </div>
      </div>
    {% endfor %}

我收到未找到 (304) 错误： "GET /media/assortiment/images/choco_ijs.jpg HTTP/1.1" 304

看起来一切都很好。无法弄清楚出了什么问题。我试图将 html 文件中的 src 更改为：

<img class="card-img-top" src="{{ artikel_pic }}" alt="{{art.artikel_naam}}">
<img class="card-img-top" src="{{ artikel_pic.url }}" alt="{{art.artikel_naam}}">
<img class="card-img-top" src="/images/{{ artikel_pic.url }}" alt="{{art.artikel_naam}}">
<img class="card-img-top" src="{{MEDIA_URL}}{{ artikel_pic.url }}" alt="{{art.artikel_naam}}">

似乎源没有路由到正确的源。有没有人有一些建议如何正确地做到这一点？

【问题讨论】：

HTTP 304 is not Not Found，即404。304表示浏览器已经缓存了文件，这很好。似乎您正在获取缓存文件（您要替换文件吗？）。您可能只需要清除开发人员工具中的缓存或硬重新加载（shift+reload）。
对不起，在上面的文本中输入错误：404错误。尝试了几次硬重新加载，但它不起作用。
它似乎没有重定向到正确的路径来显示图像。试图将图像文件夹重新定位到 app/media/images/picture.url 但它也不起作用。
1) 304 != 404 2) 没有 MEDIAFILES_DIRS 选项 3) src="{{ artikel_pic.url }}" 是正确的选项，但是 artikel_pic 可能包含与图像字段值不同的内容，因为{{MEDIA_URL}}/images/{{ artikel_pic.url }} 会产生不同的 URL，而不是您在问题中显示的内容。请出示您的查看代码。
views.py 在上面的问题中添加：

标签： html django django-templates django-media

【解决方案1】：

在 settings.py 文件中添加这些行

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

并在 html 文件中使用此代码

<img class="card-img-top" src="{{ art.artikel_pic.url }}">

【讨论】：