Use AssetsBaseUrl

mythz · mythz · commit ecad6c46cc1f · 2025-09-12T22:44:07.000+08:00
diff --git a/MyApp.ServiceInterface/AppConfig.cs b/MyApp.ServiceInterface/AppConfig.cs
@@ -9,6 +9,8 @@ public class AppConfig
     public string FeaturedSubTitle { get; set; } = "Explore AI generated creations";
     public string LocalBaseUrl { get; set; } = "https://localhost:5001";
     public string PublicBaseUrl { get; set; } = "https://my-app.org";
+    public string? AssetsBaseUrl { get; set; }
+    public string? FallbackAssetsBaseUrl { get; set; }
     public string AppDataPath { get; set; } = "App_Data";
     public string ArtifactsPath { get; set; } = "App_Data/artifacts";
     public string FilesPath { get; set; } = "App_Data/files";
@@ -43,6 +45,8 @@ public class AppConfig
         FeaturedTitle = FeaturedTitle,
         FeaturedSubTitle = FeaturedSubTitle,
         PublicBaseUrl = PublicBaseUrl,
+        AssetsBaseUrl = AssetsBaseUrl ?? PublicBaseUrl,
+        FallbackAssetsBaseUrl = FallbackAssetsBaseUrl,
         SystemUserId = SystemUserId,
         FeaturedUserIds = FeaturedUserIds,
     };
@@ -55,6 +59,8 @@ public class VueAppConfig
     public string FeaturedTitle { get; set; }
     public string FeaturedSubTitle { get; set; }
     public string PublicBaseUrl { get; set; }
+    public string AssetsBaseUrl { get; set; }
+    public string? FallbackAssetsBaseUrl { get; set; }
     public string SystemUserId { get; set; }
     public string[] FeaturedUserIds { get; set; } = [];
 }
diff --git a/MyApp.ServiceInterface/AppData.cs b/MyApp.ServiceInterface/AppData.cs
@@ -1385,6 +1385,16 @@ public IDbConnection OpenAiTaskDb(DateTime? createdDate=null)
         }
         return dbFactory.OpenDbConnection(monthDb);
     }
+    
+    public string AssetUrl(string url) => !url.Contains("://")
+        ? Config.AssetsBaseUrl.CombineWith(url)
+        : url;
+    
+    public string FallbackAssetUrl(string url) => !url.Contains("://")
+        ? Config.FallbackAssetsBaseUrl != null && Config.FallbackAssetsBaseUrl != Config.AssetsBaseUrl
+            ? Config.FallbackAssetsBaseUrl.CombineWith(url)
+            : "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23f3f4f6'/%3E%3Cg transform='translate(200,150)'%3E%3Crect x='-50' y='-40' width='100' height='80' fill='none' stroke='%23d1d5db' stroke-width='2' rx='4'/%3E%3Ccircle cx='-25' cy='-15' r='8' fill='%23d1d5db'/%3E%3Cpath d='M-35 10 L-15 -10 L5 10 L25 -5 L25 25 L-35 25 Z' fill='%23d1d5db'/%3E%3C/g%3E%3Ctext x='200' y='220' text-anchor='middle' fill='%239ca3af' font-family='Arial, sans-serif' font-size='14'%3EImage not available%3C/text%3E%3C/svg%3E"
+        : url;
 }
 
 public record struct ComfyAgentQuery(
diff --git a/MyApp/Components/Pages/Home.razor b/MyApp/Components/Pages/Home.razor
@@ -55,8 +55,9 @@
                     <!-- Image Container with dynamic aspect ratio -->
                     <a href="/generations/@artifact.GenerationId">
                         <div class="overflow-hidden bg-gray-100 dark:bg-gray-700" style="aspect-ratio: @GetAspectRatio(artifact)">
-                            <img src="@artifact.Url" data-id="@artifact.Id"
-                                 alt="Generated artifact"
+                            <img src="@AppData.AssetUrl(artifact.Url)"
+                                 data-id="@artifact.Id" data-src="@artifact.Url" 
+                                 alt="Generated artifact" 
                                  class="artifact w-full h-full object-cover group-hover:scale-105 transition-transform duration-300 cursor-pointer"
                                  loading="lazy" />
                         </div>
@@ -148,7 +149,7 @@
 import { store, events } from "/mjs/app.mjs"
 
 document.querySelectorAll('img.artifact').forEach(img => {
-    img.onerror = function (e) { this.src=store.getArtifactImageErrorUrl(Number(this.dataset.id), null, 300) }
+    img.onerror = function (e) { this.src=store.fallbackAssetUrl(this.dataset.src) }
     img.oncontextmenu = function (e) {
         e.preventDefault()
         events.publish('showArtifactMenu', { artifactId:Number(this.dataset.id), event:e })
diff --git a/MyApp/appsettings.Development.json b/MyApp/appsettings.Development.json
@@ -19,7 +19,8 @@
         }
     },
     "AppConfig": {
-      "PublicBaseUrl": "https://gateway.com",
+      "PublicBaseUrl": "https://localhost:5001",
+      "AssetsBaseUrl": "https://localhost:5001",
       "TaskConnection": "DataSource=../App_Data/tasks/{db};Cache=Shared",
       "AppDataPath": "../App_Data",
       "ArtifactsPath": "../App_Data/artifacts",
diff --git a/MyApp/appsettings.json b/MyApp/appsettings.json
@@ -20,6 +20,7 @@
         "FeaturedSubTitle": "Discover amazing AI-generated creations from our community.",
         "LocalBaseUrl": "https://localhost:5001",
         "PublicBaseUrl": "https://ubixar.com",
+        "AssetsBaseUrl": "https://www.ubixar.com",
         "TaskConnection": "DataSource=/app/App_Data/tasks/{db};Cache=Shared",
         "AppDataPath": "/app/App_Data",
         "ArtifactsPath": "/app/App_Data/artifacts",
diff --git a/MyApp/wwwroot/pages/Audio.mjs b/MyApp/wwwroot/pages/Audio.mjs
@@ -149,7 +149,7 @@ export default {
 
               <div class="z-10 flex items-center">
                 <div class="flex-grow my-2 border-2 border-gray-700 max-w-3xl mx-auto rounded-lg overflow-hidden">
-                  <AudioPlayer ref="refAudio" :src="playAudio?.url" :clsFilter="cls => cls.replace('dark:bg-black/70', 'dark:bg-black/20')"/>
+                  <AudioPlayer ref="refAudio" :src="store.assetUrl(playAudio?.url)" :clsFilter="cls => cls.replace('dark:bg-black/70', 'dark:bg-black/20')"/>
                 </div>
                 <div class="space-y-2">
                   <RouterLink :to="{ path:'/generate/feed', query: { 'new':'', remix: playAudio.generationId } }"
diff --git a/MyApp/wwwroot/pages/Generation.mjs b/MyApp/wwwroot/pages/Generation.mjs
@@ -54,7 +54,7 @@ export default {
                             </svg>
                           </div>
                           
-                          <AudioPlayer ref="refAudio" :src="selectedUrl" :clsFilter="cls => cls.replace('dark:bg-black/70', 'dark:bg-black/20')"/>
+                          <AudioPlayer ref="refAudio" :src="store.assetUrl(selectedUrl)" :clsFilter="cls => cls.replace('dark:bg-black/70', 'dark:bg-black/20')"/>
                         </div>
                         <template v-else>
                           <!-- Main Image - only show if rating is viewable -->
diff --git a/MyApp/wwwroot/pages/Home.mjs b/MyApp/wwwroot/pages/Home.mjs
@@ -43,12 +43,12 @@ export default {
                     <!-- Image Container with dynamic aspect ratio -->
                     <RouterLink :to="{ path:'/generations/' + artifact.generationId }">
                         <div class="overflow-hidden bg-gray-100 dark:bg-gray-700" :style="'aspect-ratio: ' + getAspectRatio(artifact)">
-                            <img :src="artifact.url"
+                            <img :src="store.assetUrl(artifact.url)" 
+                                 onerror="this.src=store.fallbackAssetUrl(artifact.url)"
                                  alt="Generated artifact"
                                  class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300 cursor-pointer"
                                  loading="lazy"
-                                 @contextmenu.prevent="events.publish('showArtifactMenu', { artifactId:artifact.id, event:$event })"
-                                 @error="imageSrc=store.getArtifactImageErrorUrl(artifact.id, null, 300)" />
+                                 @contextmenu.prevent="events.publish('showArtifactMenu', { artifactId:artifact.id, event:$event })" />
                         </div>
                     </RouterLink>
                     
diff --git a/MyApp/wwwroot/pages/Images.mjs b/MyApp/wwwroot/pages/Images.mjs
@@ -12,7 +12,7 @@ import RatingsBadge from "./components/RatingsBadge.mjs"
 export const ArtifactImage = {
     template:`<div v-if="artifact" class="overflow-hidden" :style="store.getBackgroundStyle(artifact) + ';' + imageStyle">
       <img :alt="artifact.prompt" :width="width" :height="height" :class="imageClass"
-           :src="imageSrc" :loading="loading || 'lazy'" @error="imageSrc=store.getArtifactImageErrorUrl(artifact.id, null, minSize)">
+           :src="imageSrc" :loading="loading || 'lazy'" @error="imageSrc=store.fallbackAssetUrl(artifact.url)">
   </div>`,
     props: {
         /** @type {import('vue').PropType<Artifact>} */
diff --git a/MyApp/wwwroot/pages/components/Feed.mjs b/MyApp/wwwroot/pages/components/Feed.mjs
@@ -245,7 +245,7 @@ export default {
             </div>
         </div>
         <div class="fixed bottom-0 max-w-3xl rounded-tl-lg rounded-tr-lg overflow-hidden" style="min-width:600px;">
-            <AudioPlayer ref="refAudio" :bus="events" :src="playAudio?.src" :title="playAudio?.title" :autoPlay="true" :showClose="true"
+            <AudioPlayer ref="refAudio" :bus="events" :src="store.assetUrl(playAudio?.src)" :title="playAudio?.title" :autoPlay="true" :showClose="true"
                          @playing="playingAudio=$event" @paused="playingAudio=null" @close="playAudio=null" />
         </div>
         <div ref="refBottom"></div>
diff --git a/MyApp/wwwroot/pages/lib/store.mjs b/MyApp/wwwroot/pages/lib/store.mjs
@@ -1292,8 +1292,9 @@ let o = {
                     : 'Medium'
         return size
     },
+    get assetsBaseUrl() { return this.appConfig?.assetsBaseUrl || this.AssetsBasePath },
     getPublicUrl(artifact, minSize = null) {
-        return this.getFilePath(this.AssetsBasePath, artifact, minSize)
+        return this.getFilePath(this.assetsBaseUrl, artifact, minSize)
     },
     getFilePath(cdnPath, artifact, minSize=null) {
         const size = this.getSize(minSize)
@@ -1334,6 +1335,23 @@ let o = {
     placeholderImageDataUri() {
         return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23f3f4f6'/%3E%3Cg transform='translate(200,150)'%3E%3Crect x='-50' y='-40' width='100' height='80' fill='none' stroke='%23d1d5db' stroke-width='2' rx='4'/%3E%3Ccircle cx='-25' cy='-15' r='8' fill='%23d1d5db'/%3E%3Cpath d='M-35 10 L-15 -10 L5 10 L25 -5 L25 25 L-35 25 Z' fill='%23d1d5db'/%3E%3C/g%3E%3Ctext x='200' y='220' text-anchor='middle' fill='%239ca3af' font-family='Arial, sans-serif' font-size='14'%3EImage not available%3C/text%3E%3C/svg%3E`
     },
+
+    assetUrl(url) {
+        if (!url) return url
+        const baseUrl = this.appConfig?.assetsBaseUrl
+        return !url.includes('://') && baseUrl
+            ? combinePaths(baseUrl, url)
+            : url
+    },
+    fallbackAssetUrl(url) {
+        if (!url) return url
+        const baseUrl = this.appConfig?.fallbackAssetsBaseUrl
+        return !url.includes('://')
+            ? baseUrl && baseUrl !== this.appConfig?.assetsBaseUrl
+                ? combinePaths(baseUrl, url)
+                : this.placeholderImageDataUri()
+            : url
+    },
     
     // Ratings
     isRatingViewable(artifact) {

Original file line number	Diff line number	Diff line change
`@@ -1385,6 +1385,16 @@ public IDbConnection OpenAiTaskDb(DateTime? createdDate=null)`
`1385`	`1385`	`}`
`1386`	`1386`	`return dbFactory.OpenDbConnection(monthDb);`
`1387`	`1387`	`}`
	`1388`	`+`
	`1389`	`+ public string AssetUrl(string url) => !url.Contains("://")`
	`1390`	`+ ? Config.AssetsBaseUrl.CombineWith(url)`
	`1391`	`+ : url;`
	`1392`	`+`
	`1393`	`+ public string FallbackAssetUrl(string url) => !url.Contains("://")`
	`1394`	`+ ? Config.FallbackAssetsBaseUrl != null && Config.FallbackAssetsBaseUrl != Config.AssetsBaseUrl`
	`1395`	`+ ? Config.FallbackAssetsBaseUrl.CombineWith(url)`
	`1396`	+ : "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23f3f4f6'/%3E%3Cg transform='translate(200,150)'%3E%3Crect x='-50' y='-40' width='100' height='80' fill='none' stroke='%23d1d5db' stroke-width='2' rx='4'/%3E%3Ccircle cx='-25' cy='-15' r='8' fill='%23d1d5db'/%3E%3Cpath d='M-35 10 L-15 -10 L5 10 L25 -5 L25 25 L-35 25 Z' fill='%23d1d5db'/%3E%3C/g%3E%3Ctext x='200' y='220' text-anchor='middle' fill='%239ca3af' font-family='Arial, sans-serif' font-size='14'%3EImage not available%3C/text%3E%3C/svg%3E"
	`1397`	`+ : url;`
`1388`	`1398`	`}`
`1389`	`1399`
`1390`	`1400`	`public record struct ComfyAgentQuery(`