如何在<img src>中添加Django模板变量？

Question

我有一个照片模型，其中包含两个字段：

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中使用模板变量？ 附注：images文件夹存在于静态文件夹中，图片也存在。我已将静态目录添加到settings.py中。如果我将src更改为普通的src，则可以正常工作，例如

。

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

照片正常显示。

- varham

---

这不应该是一个FileField吗？ - Willem Van Onsem

关于URL，它应该是<img src="{%static photo.path %}"/>但我并不确定这会起作用，因为您没有指定一个“photo”变量。 - Willem Van Onsem

照片变量在代码中的位置较高：我有一个循环 {%for photo in photos %}。而 {%static photo.path %} 无法工作。 - varham

好的 {% static photo.path %} 将会给出一个静态URL，但在这里使用 FileField 可能更好。 - Willem Van Onsem

我用了它，但是当我选择照片时，路径只是图像名称。我该如何使路径成为images/image_name.png？ - varham

既然如此，为什么要首先使用 {% static ... %}？{% static ... %} 的想法是您有专用目录（命名为 static），并且允许访问这些目录，视图返回正确的文件流。但是，您不能只从服务器返回随机文件，因为那将是可能出现的最严重的安全问题之一。因此，您需要一些“视图”来限制访问。这正是文件字段背后的想法之一：https://docs.djangoproject.com/en/2.1/topics/files/ - Willem Van Onsem

Answer 1

你在这里将'{{photo.path}}'作为一个字符串传递给{% static ... %}，因此它只会将静态URL根目录添加到该字符串的前面。

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

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

因此，{% static ... %}接受变量作为参数，并将使用photo变量的path属性的内容。（当然，前提是该变量被传递，或者是您使用{% for ... %}循环生成的变量等等。）

- Willem Van Onsem

Answer 2

Do it like this:

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

在静态标签范围结束后使用它。

- Tushar_noob

Answer 3

使用 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/'

Create a folder named "media" in your project (at the same level as your apps).

In your urls.py (main):

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"))

在你的views.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 %}

- Carlos Herrera

Answer 4

模板

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

- Vishal Patidar

Answer 5

已解决：在survey.html中动态加载图像

"survey.toolsTechnology"是一个动态变量，每次变量改变，基于它的图像也会随之改变。

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

- Abdul Khaliq