如何将图像传递给 Django 中的模板？答案

【问题标题】：How can I pass an image to a template in Django?如何将图像传递给 Django 中的模板？
【发布时间】：2016-07-28 20:14:50
【问题描述】：

假设views.py中对应的函数长这样

from PIL import Image
def get_img(request, img_source)
    base_image = Image.open(os.getcwd() + '/deskprod/media/img/'+ img_source + ".png")
    #Some editing of base_image done with PIL that prevents image from being directly loaded in html
    return render_to_response('get_img.html', {
        'base_image': base_image},
        context_instance=RequestContext(request))

然后如何在get_img.html 模板中显示base_image？

【问题讨论】：

您不需要将图像传递给您的上下文。您只需要图像的路径即可在模板中显示图像
摩西，谢谢你的回复。在实际程序中，会有一些无法在 html 中实现的图像编辑 - 即使用 python 图像库完成的事情。因此，不能直接从模板加载图像。我已经编辑了问题以表明这一点。
“因此，不能直接从模板中加载图像”——这是不合理的。仅仅因为您编辑图像并不意味着您无法将其保存在某个地方并正常查看。无论如何，通过将原始图像数据传递给模板，您可以获得什么？谈论一些 HTML 不适合做的事情......

标签： python django image python-imaging-library

【解决方案1】：

您应该处理图像，将其保存在本地磁盘上，然后发送到它的路径或更类似于媒体 url，它将对应于该图像作为 html 模板的上下文。您需要配置您的 django 服务器以提供静态和媒体文件，并配置在生产环境中提供这些文件。在此处阅读更多信息https://docs.djangoproject.com/en/1.9/howto/static-files/

但是，如果您不能或真的不想将其保存在本地，则应该可以使用 PIL 动态创建动态图像并使用 django 提供服务。就像你应该添加的代码一样。

response = HttpResponse(mimetype="image/png")
base_image.save(response, "PNG")
return response

查看更多信息http://effbot.org/zone/django-pil.htm，虽然我没有测试过，但它可能会起作用。

【讨论】：

令我惊喜的是，这个问题实际上有一个简单的解决方案。非常感谢，卡米尔。

【解决方案2】：

settings.py

   'DIRS': [os.path.join(BASE_DIR, 'templates')], # add this line in TEMPLATES
    MEDIA_ROOT = os.path.join(BASE_DIR, 'media/images')
    MEDIA_URL = '/media/images/'

添加存储manage.py的模板和媒体/图像目录。

urls.py

urlpatterns = [

                  url('polls/', views.get_img, name="polls"),


              ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

views.py

from django.conf import settings

def get_img(request):
    path = settings.MEDIA_ROOT
    img_list = os.listdir(path + "/")
    print(img_list[0])
    base_image = "http://127.0.0.1:8000/media/images/" + img_list[0]
    content = {"base_image": base_image}
    return render(request, 'get_img.html', content)

get_img.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drop_down</title>
</head>
<body>

  {{base_image}}
  <img src="{{base_image}}" style="width: 20%; height: 20%;" alt="{{base_image}}">

</body>
</html>

【讨论】：

您可以使用字典 content = {"base_image": base_image} 将 base_image 传递给 get_image.html 页面，并在 get_img.html 模板中的 src 属性中使用 {{base_image}} 键来显示。跨度>

【解决方案3】：

我认为您必须将图像（将其写入临时文件）保存在项目的静态目录中，并在模板中使用静态命令和图像文件名来显示它。

【讨论】：