Почему не отображается картинка на странице во Flask?

Question

[deus97]

Есть модель товара в бд. Все товары с картинками верно отображаются на странице shop.html. Изображение товара хранится в переменной product.item_image_path. Однако, когда я пытаюсь вывести определенный товар в product_detail.html, все поля отображаются верно, кроме картинок (скриншот внизу). Как это исправить? Ведь, путь к изображению один и тот же.

@app.route("/shop")
def shop():
    products = Product.query.all()
    return render_template("shop.html", products=products)


@app.route("/product_detail/<int:product_id>", methods=["GET"])
def product_detail(product_id):
    product = Product.query.filter_by(id=product_id).first()
    return render_template("/product_detail.html", product=product)

shop.html

{% block content %}
	{% if products %}	
		<section class="clothes">
			<h1>Clothes</h1>
		</section>
		<div class="titles">
			{% for product in products %}
			<a href="{{ url_for('product_detail', product_id=product.id) }}">
			<div class="item">
				<div class="overlay">
					<img class="item_img" src="{{ product.item_image_path }}">
					</div>
						<div class="item_info">
							<p><strong>{{ product.title|truncate(25) }}</strong></p>
							<p>{{ product.price }} $</p>
						</div>
        			<form action="{{ url_for('add_to_cart', product_id=product.id) }}" method="GET" enctype="multipart/form-data">
						<button type="submit">Add to card</button>
					</form>					
				</div>
			</a>
			{% endfor %}
		</div>
		{% else %}
		<section class="clothes">
			<h1>There are no products in this category</h1>
		</section>
		{% endif %}
{% endblock %}

Модель товара

class Product(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    description = db.Column(db.String(2000), nullable=False)
    item_image_path = db.Column(db.String(255), nullable=False)
    price = db.Column(db.Float, nullable=False)
    in_stock = db.Column(db.String(100), default=True)
    category_id = db.Column(db.Integer, db.ForeignKey('category.id'), primary_key=True, nullable=False)

product_detail.html

{% endblock %}

{% block content %}

{{ product.item_image_path }}
			 <img src="{{ product.item_image_path }}" alt="{{ product.item_image_path }}">

		<section class="clothes">
			<h1>{{ product.title }}</h1>
		</section>

		<div class="products_images">
			 <img src="{{ product.item_image_path }}">
			 <img src="{{ product.item_image_path }}">
		</div>

		<div class="product_detail">
			<div class="product_description">
			 	<p>{{ product.description }}</p>
			 	<form action="{{ url_for('add_to_cart', product_id=product.id) }}" method="get">
			 		<input type="submit" name="" value="Add to Cart">
				 	<button type="submit">Add to Cart</button>
				</form>
			</div>
		</div>

{% endblock %}

Answer 1

[Max Kobilev]

Попробуйте строить URL для изображений через url_for
url_for('static', filename='path/to/file')

Для того, чтобы понимать что у Вас происходит было бы хорошо увидеть разницу в запросах к этим изображениям в devtools во вкладке Network

Comments

[deus97]

Благодарю вас за ваш ответ! Вы правы, действительно браузер ищет картинку по адресу 127.0.0.1:5000/categories/10/static/images/Bags/tr...

Вот по этому адресу картинка отображается верно:
127.0.0.1:5000/static/images/Bags/travel_bag-o1%20...

Как я понимаю, categories/10 дописалось из функции show_products_of_category. Как правильно прописать путь к картнке?

@app.route('/categories/<int:category_id>/products')
def show_products_of_category(category_id):
    category = Category.query.get_or_404(category_id)
    products = category.products
    return render_template('shop.html', category=category, products=products)

Буду благодарен