Images will not be displayed on flask using loop

Question

I am trying to display some images that have been uploaded to flask. I am using a dictionary containing the image names and some information about the images and looping through this into the template, however when loading the page the images are not displayed and the image scr looks like this :

img scr="/upload?filename=test_chili2.jpg"

Whereas other working images are rendered as:

img src="/static/account-icon.png"

This is the code currently on my template:

{% for value in image_dictionary %}
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
   <img scr="{{url_for('upload', filename = image_dictionary[loop.index][0])}}">
   <div class = "carousel-caption">
      <h4 style="color:black;">
        Plant: {{image_dictionary[loop.index][1]}}
      </h4>

      <p style="color:black;">
        Prediction Accuracy {{image_dictionary[loop.index][2]}}
      </p>
   </div>  
</div>
{% endfor %}

The dictionary i am using looks like this:

{'image': [
  {'picture': 'test_chili2.jpg', 'count': "'green-chili:': 8", 'prediction': '100.0'},
  {'picture': 'test_chili1.jpg', 'count': "'green-chili:': 1", 'prediction': '99.9981164932251'},
  {'picture': 'test_chili.jpg', 'count': "'green-chili:': 3", 'prediction': '97.3533034324646'},
  {'picture': 'test_chili3.jpg', 'count': "'green-chili:': 6", 'prediction': '99.99994039535522'}
 ] }
 {'1': ['test_chili2.jpg', "'green-chili:': 8", '100.0'],
  '2': ['test_chili1.jpg', "'green-chili:': 1", '99.9981164932251'],
  '3': ['test_chili.jpg', "'green-chili:': 3", '97.3533034324646'],
  '4': ['test_chili3.jpg', "'green-chili:': 6", '99.99994039535522']}

Answer 1

You have a typo in your template, here's the fixed version:

{% for value in image_dictionary %}
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
   <img src="{{url_for('upload', filename = image_dictionary[loop.index][0])}}">
   <div class = "carousel-caption">
      <h4 style="color:black;">
        Plant: {{image_dictionary[loop.index][1]}}
      </h4>

      <p style="color:black;">
        Prediction Accuracy {{image_dictionary[loop.index][2]}}
      </p>
   </div>  
</div>
{% endfor %}

Please double check on line 3 of my correction "src" instead of "scr".