I am creating a web app in flask, python, mysql. When viewing every other page on my website my images load, but when viewing one specific page, I can't get any images to load using already working code. Is there any reason this may be?

Code for one of my working pages:

{% extends "base.html" %}{% block content %}<!-- home style sheet --><link rel="stylesheet" type="text/css" href="/static/css/home.css">{% for index in range(0, shoes|count, 3) %}<div class="row"><div class="col-md-4"><a href="shop/item/{{ shoes[index][0] }}"><h4>{{ shoes[index][1] }}</h4><img src="{{ shoes[index][7] }}" alt="" width="250px" height="150px"></a></div>{% if shoes|count - index >= 2 %}<div class="col-md-4"><a href="shop/item/{{ shoes[index][0] + 1 }}"><h4>{{ shoes[index + 1][1] }}</h4><img src="{{ shoes[index + 1][7] }}"  alt="" width="250px" height="150px"></a></div>{% endif%}{% if shoes|count - index >= 3 %}<div class="col-md-4"><a href="shop/item/{{ shoes[index][0] + 2 }}"><h4>{{ shoes[index + 2][1] }}</h4><img src="{{ shoes[index + 2][7] }}"  alt="" width="250px" height="150px"></a></div>{% endif%}</div>{% endfor %} {% endblock %}

and its python file:

from app import app, mysql
from flask import render_template@app.route('/shop')
def shop():cursor = mysql.connect().cursor()cursor.execute("SELECT * FROM shoes")data = cursor.fetchall()return render_template('shop.html', shoes = data)

Now the failing page:

{% extends "base.html" %}{% block content %}<!-- home style sheet --><link rel="stylesheet" type="text/css" href="/static/css/home.css"><div class="row"><div class="col-md-5"><img src="{{ item[0][7] }}" alt="" width="250px" height="150px"></div></div>{% endblock %}

and its python file:

from app import app, mysql
from flask import render_template@app.route('/shop/item/<id>')
def item(id):cursor = mysql.connect().cursor()cursor.execute("SELECT * FROM shoes WHERE id=id")data = cursor.fetchall()return render_template('item.html', item = data)

Any help is appreciated, thanks.

EDIT;

I know the sql data is being sent to this page correctly because when I inspect element on the empty image, I have the exact same src url as on the working page. Also, all other attributes of the row i fetched are correct. My sql table looks like this:

id | name                             | size | price  | primarycolor | secondarycolor | othercolor | img                     |
+----+----------------------------------+------+--------+--------------+----------------+------------+-------------------------+
|  1 | 2013 Air Jordan 11 Retro         | 10.0 | 215.00 | black        | gamma blue     | NULL       | static/pics/gamma.png 

URLs are made up of directories and filenames. Anything that precedes a / is considered a directory. Anything after the final / is the filename. Your problem is that you're using relative URLs. When you say

static/pics/gamma.png

your browser makes a request for that file relative to the current page's directory. In the case of URLs like / and /shop, the directory is /. The browser will request /static/pics/gamma.png.

In the case of URLs like /shop/item/1, the directory is /shop/item/. Your browser will then request /shop/item/static/pics/gamma.png.

Since your URLs match the former, you should store them as absolute URLs (with the leading /) so that the browser will make the correct request.

On a semi-related note, you should be using url_for whenever possible.

url_for('static', filename='css/home.css')