How to add img elements with Javascript when using Django?

August 12, 2022

I am trying to dynamically insert img elements to the website I am building which uses Django for the back-end. The images change often so I pass the src from Python to Javascript like this:

views.py

path='{% static "../static/assets/'+image_name+'" %}'
response = render(request, 'main.html',{'image_path':path})
return response

Then I declare a global variable in the template so I can use this in the .js files.

main.html

var imagePath = {{image_path|safe}}

Then I use Javascript to pass this as src to new img elements. However, when I do it, Django cannot find images. When I put the string as src to a img element manually, it works.

Does anyone know how to solve this?

>Solution :

You need to use this

from django.templatetags.static import static
path = static(f'assets/{image_name}')
response = render(request, 'main.html',{'image_path':path})
return response