How can I create a dynamic src url in html img tag?

Question

<img src="https://openweathermap.org/img/wn/10d@2x.png">

The src url changes dynamically by changing the last part for example, by changing 10d@2x.png to 11d@2x.png a different icon can be obtained. However, I want to dynamically change the url in html using Jinja2 and flask

I tried using

img src="https://openweathermap.org/img/wn/{{icon}}@2x.png"

and send the icon variable from server side, but it won't work

score 1 · Accepted Answer · answered Feb 04 '22 at 07:01

1

When you use render_template in your code, do something like that:

return render_template('mytemplate.html', icon='11d')

In your template:

<img src="https://openweathermap.org/img/wn/{{ icon }}@2x.png">

Note the double-curly braces to render the variable. See the documentation

answered Feb 04 '22 at 07:01

Corralien

109,409
8
28
52

I did try with double as well as single curly braces, but I'm unable to get the image from the url – Umesh N Feb 04 '22 at 07:08
1

If you copy/paste the generated url in your browser, does it work? – Corralien Feb 04 '22 at 07:11
I created a test anchor tag using test and it is working , but the image tag is not showing the image at the url – Umesh N Feb 04 '22 at 07:19
How do you render your template? – Corralien Feb 04 '22 at 07:21
return render_template("weather.html", filename = filename, city=city, current_temp= current_temp, current_weather= current_weather,hi_low= hi_low, icon ='13d' ) – Umesh N Feb 04 '22 at 07:23
Hey i found the bug . there was an extra d in src which was causing the issue, Thanks a lot for helping!! – Umesh N Feb 04 '22 at 07:24
I accepted the answer as well as upvoted, thanks again! – Umesh N Feb 04 '22 at 07:28

How can I create a dynamic src url in html img tag?

1 Answers1