get profile image blob path and render in template

peach-web/src/context/sbot.rs

@@ -40,6 +40,8 @@ pub struct ProfileContext {
     pub name: Option<String>,
     pub description: Option<String>,
     pub image: Option<String>,
+    // the path to the blob defined in the `image` field (aka the profile picture)
+    pub blob_path: Option<String>,
 }
 
 impl ProfileContext {
@@ -57,6 +59,7 @@ impl ProfileContext {
             name: None,
             description: None,
             image: None,
+            blob_path: None,
         }
     }
 
@@ -99,7 +102,14 @@ impl ProfileContext {
                     _ => (),
                 }
             }
-            context.id = Some(id);
+
+            // determine the path to the blob defined by the value of `context.image`
+            if let Some(ref blob_id) = context.image {
+                context.blob_path = match sbot_client.get_blob_path(&blob_id).await {
+                    Ok(id) => Some(id),
+                    Err(_) => None,
+                }
+            }
         } else {
             // the sbot is not currently active; return a helpful message
             context.flash_name = Some("warning".to_string());

peach-web/templates/scuttlebutt/profile.html.tera

@@ -12,7 +12,11 @@
           </a>
           <!-- PROFILE BIO -->
           <!-- profile picture -->
-          <img id="profilePicture" class="icon-large" src="{{ image }}" alt="Profile picture">
+          {%- if blob_path %}
+          <img id="profilePicture" class="icon-large" src="/blob/{{ blob_path }}" title="Profile picture" alt="Profile picture">
+          {% else %}
+          <img id="profilePicture" class="icon" src="/icons/user.svg" title="Profile picture" alt="Profile picture">
+          {% endif %}
           <!-- name, public key & description -->
           <p id="profileName" class="card-text" title="Name">{{ name }}</p>
           <label class="label-small label-ellipsis font-gray" style="user-select: all;" for="profileName" title="Public Key">{{ id }}</label>