Dont inline profile image, instead add endpoint to serve it

app/routes.py

@@ -1,7 +1,7 @@
 import csv
 from io import StringIO
 import io
-from flask import Blueprint, render_template, redirect, request, send_file, url_for, flash
+from flask import Blueprint, Response, make_response, render_template, redirect, request, send_file, url_for, flash
 from werkzeug.security import generate_password_hash, check_password_hash
 from app.models import Profile, Reading, db, User
 from app.forms import DeleteForm, LoginForm, ProfileForm, ReadingForm, SignupForm
@@ -233,6 +233,29 @@ def profile():
 
     return render_template('profile.html', form=form, profile=profile)
 
+@user.route('/profile/image/<int:user_id>')
+def profile_image(user_id):
+    # Ensure the reading belongs to the logged-in user
+    if user_id != current_user.id:
+        flash('You are not authorized to delete this reading.', 'danger')
+        return redirect(url_for('main.dashboard'))
+
+    profile = Profile.query.filter_by(user_id=user_id).first()
+    if profile and profile.profile_pic:
+        image_data = base64.b64decode(profile.profile_pic)
+        response = make_response(image_data)
+        response.headers.set('Content-Type', 'image/jpeg')
+        # Cache for 1 day
+        response.headers.set('Cache-Control', 'public, max-age=86400')
+        return response
+    else:
+        # Serve the default SVG if no profile picture is found
+        with open('app/static/images/default-profile.svg', 'r') as f:
+            default_image = f.read()
+
+        response = make_response(default_image)
+        response.headers.set('Content-Type', 'image/svg+xml')
+
 @main.route('/data', methods=['GET', 'POST'])
 @login_required
 def manage_data():

app/static/images/default-profile.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="gray">
+  <circle cx="50" cy="50" r="48" stroke="black" stroke-width="2" />
+  <circle cx="50" cy="35" r="15" fill="white" />
+  <rect x="25" y="60" width="50" height="25" fill="white" />
+</svg>

app/templates/_layout.html

@@ -59,7 +59,7 @@
                     <a class="flex items-center gap-2 text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4"
                         href="{{ url_for('user.profile') }}" @click="isOpen = false">
                         {% if current_user.profile and current_user.profile.profile_pic %}
-                        <img src="data:image/png;base64,{{ current_user.profile.profile_pic }}" alt="Profile Picture"
+                        <img src="{{ url_for('user.profile_image', user_id=current_user.id) }}" alt="Profile Picture"
                             class="w-8 h-8 rounded-full border-2 border-white object-cover group-hover:scale-105 transition">
                         {% else %}
                         <!-- Default SVG Icon -->

app/templates/profile.html

@@ -5,7 +5,7 @@
 
     <div class="flex items-center justify-center mb-4">
         {% if profile.profile_pic %}
-        <img src="data:image/jpeg;base64,{{ profile.profile_pic }}" alt="Profile Picture"
+        <img src="{{ url_for('user.profile_image', user_id=current_user.id) }}" alt="Profile Picture"
             class="w-24 h-24 rounded-full border">
         {% else %}
         <img src="{{ url_for('static', filename='default.png') }}" alt="Default Profile Picture"