如何在 <img src> 中添加 django 模板变量？答案

【问题标题】：How to add django template variable in <img src>?如何在 <img src> 中添加 django 模板变量？
【发布时间】：2022-02-20 00:36:38
【问题描述】：

我有一个包含两个字段的照片模型：

title = models.CharField()
path = models.CharField()

当我在管理面板中添加新照片时，路径等于/images/image_ex.jpg 这是我的视图文件：

def gallery(request):
   photos = Photo.objects.all()
   return render(request, 'gallery.html', {'photos': photos})

这是gallery.html中的标签：

{% loadstaticfiles %}
<img src="{%static '{{photo.path}}'%}"/>

问题是照片没有渲染，如果我查看页面的代码，src 是这样的：

src="static/%7B%7B%20photo.path%20%7D%7D"

有什么问题？如何在 src 中使用模板变量？附：图片文件夹存在于静态文件夹中，图片也存在。我将静态目录添加到 settings.py。另外，如果我将 src 更改为普通的，例如

<img src="{static 'images/image_ex.png'%}">

照片正常渲染。

【问题讨论】：

这不应该是FileField吗？
至于网址，应该是<img src="{%static photo.path %}"/> 但我不相信这会起作用，因为您没有指定photo 变量。
照片变量在代码中指定得更高：我有一个循环 {%for photo in photos %}。而且 {%static photo.path %} 不起作用
好吧，{% static photo.path %} 会给出一个静态 URL，但在这里使用 FileField 可能会更好。
嗯，我用过，但是我选择照片的时候，路径就是图片名。如何使路径成为 images/image_name.png

标签： python django django-templates

【解决方案1】：

您在这里将'{{photo.path}}' 作为字符串 传递给{% static ... %}，因此它会简单地将静态URL 根添加到该字符串。

如果要使用photo.path的内容，可以使用：

&lt;img src="{% static <b>photo.path</b> %}"/&gt;

所以{% static ... %} 接受变量作为参数，并将获取photo 变量的path 属性的内容。（当然，假设该变量已传递，或者是您使用{% for ... %} 循环等生成的变量。

【讨论】：

【解决方案2】：

使用 for 标记

{% for p in photos %}
    <img src="{% static '{{ p.path }}' %}"/>
{% endfor %}

更好地使用 Imagefield 作为模型中的字段

在您的 settings.py 中

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

在您的项目中创建一个名为“media”的文件夹（与您的应用处于同一级别）

在您的 urls.py（主）中

from . import views, settings
from django.contrib.staticfiles.urls import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns


urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

在你的 models.py 中

将 CharField 替换为 Imagefield

image = models.ImageField(upload_to="my_folder_name")

像这样：

class Photo(models.Model):
    title = models.CharField()
    image = models.ImageField(upload_to="my_folder_name"))

在你看来.py

def gallery(request):
   photos = Photo.objects.all()
   return render(request, 'gallery.html', {'photos': photos})

在您的模板中

{% for p in photos %}
    <img src="{{ p.photo.url }}"/>
{% endfor %}

【讨论】：

【解决方案3】：

这样做：

<img src="{static 'images/'%}{{image_ex.png}}">

在静态标签作用域结束后使用。

【讨论】：

【解决方案4】：

用于模板

{% for image in all_image %}
    <img src="{{ image.image.url }}"/>
{% endfor %}

【讨论】：