How to relate images to database entries

Issue

I have created a rudimentary clothing ecommerce website, where product images are stored in an images folder and product information in an sqlite database. Currently the route for the page displaying all shirts looks like this:

    @app.route('/shirts')
def shirts():
    images = []
    for filename in os.listdir('static/images/shirts'):
        if filename.endswith('.webp'):
            images.append(os.path.join('/static/images/shirts', filename))
        else:
            continue
    descriptions = Shirt.query.all()
    return render_template('shirts.html', info=zip(images, descriptions), title='Shirts')

The ‘info’ variable is then passed to the ‘shirts’ template and iterated over to display product images with the related product description (content) below each image:

    {% for image, description in info %}
        <div class="item">
            <img src="{{ image }}" class="image">
            <p class="description">{{ description.content }}</p>
        </div>
    {% endfor %}

I realise that this is not a great idea as the product information is in no way linked to the product image, and will cause me further problems when I try to add more product information such as sizes, colours etc.

The seemingly obvious solution to me would be to store images in the database too, however when searching this, many suggest that this is not the way to go?

How would something like this be done in the real world, or at least how could this be done better?

Thanks for reading

Solution

Hi you can add the images associated to the products as strings into the database, This can be included in your database model (assuming you are using sqlalchemy)

class Products(db.Model):
    '''
    Products table, this will hold all info about products
    '''
    __searchable__ = ['name']

    id          = db.Column(db.Integer, primary_key=True)
    name        = db.Column(db.String(100), nullable=False)
    description = db.Column(db.Text, nullable=True)
    price       = db.Column(db.Float)
    stock       = db.Column(db.Integer, nullable=False, default=1)
    #image is a string, which is the filename of the imagefile
    image2      = db.Column(db.String(100), nullable=True, default='default.jpg')
    image1      = db.Column(db.String(100), nullable=True)
    #vendor details
    vendor_id   = db.Column(db.Integer, db.ForeignKey('vendor.user_id'), nullable=False)
    vendor      = db.relationship('Vendor',lazy=True, uselist=False)

So now you can get all attributes of this product from the database query

products = Products.query.all()

and you can access the image name in the templates like so
(assuming you are storing images in ‘/static/images’ directory)

{% for product in products %}
  <div>
     <h1>{{product.name}}</h1>
     <img src='static/images/{{product.image1}}'>
  </div>
{% endfor %}

Of course you can use things like url_for to make it more maintainable,
link here

Answered By – Jishnu P Das

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0