Finish images link-up, to move logic separately to make uploads folder re-usable across app

app/main/routes.py

-from flask import render_template
+from flask import render_template, send_from_directory
 from app.main import bp
 import datetime
+import os
 
 @bp.route('/')
 def index():
     date=datetime.datetime.now()
     tomorrow_object = date + datetime.timedelta(days=1)
     return render_template('index.html', today = date.strftime('%Y-%m-%d'), tomorrow = tomorrow_object.strftime('%Y-%m-%d'))
+
+@bp.route('/uploads/listing_images/<filename>')
+def upload_file(filename):
+    
+    upload_folder = os.path.join(os.getcwd(), 'app/uploads')
+    return send_from_directory(upload_folder, f'listing_images/{filename}')
\ No newline at end of file

app/templates/bookings/listings.html

@@ -13,7 +13,8 @@
                 <li class="slide-visible">
                     <div class="card shadow h-100">
                         <div class="ratio ratio-16x9">
-                            <img src="../uploads/listing_images/{{ top_listing_images[listing.id] }}.jpg" class="card-img-top" loading="lazy" alt="...">
+                            <th>{{top_listing_images[listing.id]}}</th>
+                            <img src="{{ url_for('main.upload_file', filename=top_listing_images[listing.id]) }}" class="card-img-top" loading="lazy" alt="Main Image">
                         </div>
                         <div class="card-body p-3 p-xl-4">
                             <h3 class="card-title h5">{{listing.destination_location}}</h3>