CODEWITHSUNDEEP
pythonsqliteflasksqlalchemyjinja2
Glen Ottley
Glen Ottley

Reputation: 71

Pass image path from database to jinja template

Sorry for the repeated question here. I have tried reading other similar questions but am having trouble implementing the given solutions. I am hoping that an answer given specifically to my example will finally solve this for me.

The project is a simple clothing ecommerce site in which all 'Coat' products are displayed on one page, showing an image, name and price (I have this part working). The user can then click on a product image to be linked to that particular products page.

I am attempting to pass the image path to the template, the image filename is stored in an sqlite database in addition to the other fields such as 'name' and 'price'. This database table is created from an SQLAlchemy model called 'Coat'.

class Coat(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.Text, nullable=False)
    description = db.Column(db.Text, nullable=True)
    price = db.Column(db.Float)
    image1 = db.Column(db.String(100), nullable=True, default='default.jpg')
    image2 = db.Column(db.String(100), nullable=True)

The route that renders 'product.html' looks like this:

@app.route('/product/<id>')
def product(id):
    product = Coat.query.get(id)
    return render_template('product.html', title='Product', 
        product=product)

And the 'product.html' template looks like this: 

{% extends "base.html" %}
{% block content %}
    <div class="product">
        <img src="static/images/coats/{{ product.image1 }}" class="image">
        <p class="name">{{ product.name }}</p>
        <p class="price">{{ product.price }}</p>
    </div>
{% endblock %}

Finally, I will include the 'coats' route & 'coats.html' template which both work fine.

@app.route('/coats')
def coats():
    products = Coat.query.all()
    return render_template('coats.html', products=products, title='Coats')


{% extends "base.html" %}
{% block content %}
    {% for product in products %}
        <div class="product">
            <a href="{{ url_for('product', id=product.id) }}"><img src="static/images/coats/{{ product.image1 }}" class="image"></a>
            <p class="name">{{ product.name }}</p>
            <p class="price">{{ product.price }}</p>
        </div>
    {% endfor %}
{% endblock %}

I cannot understand why the images load fine in 'coats.html' but will not display correctly in 'product.html'

Thanks for reading

Upvotes: 0

Views: 1460

Answers (1)

Glen Ottley
Glen Ottley

Reputation: 71

After a little more research I have managed to solve this by using url_for. I am still not entirely sure why my original code did not work correctly, perhaps somebody could jump in and explain this if they are feeling generous :)

Here is product.html working correctly:

{% extends "base.html" %}
{% block content %}
    <div class="product">
        <img class="image" src="{{ url_for('static', filename='images/coats/' + product.image1) }}">
        <p class="name">{{ product.name }}</p>
        <p class="price">{{ product.price }}</p>
    </div>
{% endblock %}

Upvotes: 1

Related Questions