database driven image uploader and storage service model

src/app/hero/hero.component.html

@@ -1,7 +1,7 @@
 <section class="hero">
   <!-- Mountain background layer -->
   <div class="hero-mountains" aria-hidden="true">
-    <img [src]="config().hero_background_url" alt="">
+    <img [src]="resolveImageUrl(config().hero_background_url)" alt="">
   </div>
 
   <!-- Gradient overlay -->
@@ -11,7 +11,7 @@
   <div class="hero-content container">
     <div class="hero-inner">
       <div class="hero-icon">
-        <img [src]="config().hero_icon_url" alt="" class="hero-flower">
+        <img [src]="resolveImageUrl(config().hero_icon_url)" alt="" class="hero-flower">
       </div>
       <h1 class="hero-title">
         <span class="hero-line1">{{ config().name_primary }}</span>
@@ -37,6 +37,6 @@
 
   <!-- Mountain divider at bottom -->
   <div class="hero-divider" aria-hidden="true">
-    <img [src]="config().hero_divider_url" alt="">
+    <img [src]="resolveImageUrl(config().hero_divider_url)" alt="">
   </div>
 </section>

src/app/hero/hero.component.ts

@@ -2,6 +2,7 @@ import { Component, inject } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
 import { StationConfigService } from '../services/station-config.service';
+import { resolveImageUrl } from '../services/app-config.service';
 
 @Component({
   selector: 'app-hero',
@@ -12,4 +13,8 @@ import { StationConfigService } from '../services/station-config.service';
 })
 export class HeroComponent {
   readonly config = inject(StationConfigService).config;
+
+  resolveImageUrl(url: string): string {
+    return resolveImageUrl(url);
+  }
 }