database driven image uploader and storage service model

src/app/donate/donate.component.html

@@ -3,7 +3,7 @@
   <div class="donate-banner">
     <div class="donate-banner-overlay">
       <div class="container donate-banner-content">
-        <img [src]="config().hero_icon_url" alt="" class="donate-flower-hero" aria-hidden="true">
+        <img [src]="resolveImageUrl(config().hero_icon_url)" alt="" class="donate-flower-hero" aria-hidden="true">
         <h2>Keep the Music <span class="text-accent">Free</span></h2>
         <p class="donate-subtitle">
           {{ config().name_primary }} {{ config().name_secondary }} Radio is 100% listener-funded and independent.
@@ -42,7 +42,7 @@
     <!-- One-time donation -->
     <div class="donate-one-time">
       <div class="donate-flower-divider" aria-hidden="true">
-        <img [src]="config().logo_url" alt="">
+        <img [src]="resolveImageUrl(config().logo_url)" alt="">
       </div>
       <h3>Or Make a One-Time Gift</h3>
       <p class="section-intro">

src/app/donate/donate.component.ts

@@ -5,6 +5,7 @@ import { map, Observable, startWith } from 'rxjs';
 import { TierService } from '../services/tier.service';
 import { Tier } from '../interfaces/tier';
 import { StationConfigService } from '../services/station-config.service';
+import { resolveImageUrl } from '../services/app-config.service';
 
 interface TiersState {
   loading: boolean;
@@ -22,6 +23,10 @@ export class DonateComponent {
   private tierService = inject(TierService);
   readonly config = inject(StationConfigService).config;
 
+  resolveImageUrl(url: string): string {
+    return resolveImageUrl(url);
+  }
+
   /** Async pipe drives the template — guarantees change detection on every emission. */
   readonly tiers$: Observable<TiersState> =
     this.tierService.getTiers().pipe(