improve asset + fallback urls

Author: mythz

MyApp.ServiceInterface/AppData.cs

@@ -1393,7 +1393,7 @@ public string AssetUrl(string url) => !url.Contains("://")
     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"
+            : "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23364153'/%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;
 }
 

MyApp/wwwroot/pages/Generation.mjs

@@ -46,7 +46,7 @@ export default {
                         <div v-if="isType('Audio')" class="w-full h-full cursor-pointer flex flex-col justify-between"
                              @click.stop="refAudio?.player?.toggle()"
                           >
-                          <img src="/img/bg-audio.svg" class="absolute top-0 left-0 h-20 w-full">
+                          <img :src="store.assetUrl('/img/bg-audio.svg')" class="absolute top-0 left-0 h-20 w-full">
 
                           <div class="mt-20 mb-12 flex-grow flex items-center">
                             <svg class="mx-auto size-64 text-purple-600 dark:text-purple-400 mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -59,7 +59,8 @@ export default {
                         <template v-else>
                           <!-- Main Image - only show if rating is viewable -->
                           <img v-if="selectedUrl && store.isRatingViewable(selectedArtifact)"
-                               :src="selectedUrl"
+                               :src="store.assetUrl(selectedUrl)"
+                               :onerror="store.imgOnError(selectedUrl)"
                                :alt="selectedArtifact.caption || generation.description || 'Generated image'"
                                class="max-w-full max-h-full object-contain"
                                :class="{ 'cursor-zoom-in': !store.prefs.zoomIn, 'cursor-zoom-out':store.prefs.zoomIn }"
@@ -100,7 +101,8 @@ export default {
                            :class="{ 'ring-2 ring-blue-500': artifact.url === selectedUrl }"
                            @click="selectedUrl = artifact.url">
                       <img v-if="store.isRatingViewable(artifact)"
-                             :src="artifact.url"
+                             :src="store.assetUrl(artifact.url)"
+                             :onerror="store.imgOnError(artifact.url)"
                              :alt="'Artifact ' + artifact.id"
                              class="w-full object-cover">
     

MyApp/wwwroot/pages/Home.mjs

@@ -43,8 +43,8 @@ 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="store.assetUrl(artifact.url)" 
-                                 onerror="this.src=store.fallbackAssetUrl(artifact.url)"
+                            <img :src="store.assetUrl(artifact.url)"
+                                 :onerror="store.imgOnError(artifact.url)"
                                  alt="Generated artifact"
                                  class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300 cursor-pointer"
                                  loading="lazy"

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.fallbackAssetUrl(artifact.url)">
+           :src="store.assetUrl(imageSrc)" :loading="loading || 'lazy'" :onerror="store.imgOnError(artifact.url)">
   </div>`,
     props: {
         /** @type {import('vue').PropType<Artifact>} */
@@ -328,7 +328,8 @@ export default {
 
                     <!-- Image -->
                     <img
-                        :src="selectedImage.url"
+                        :src="store.assetUrl(selectedImage.url)"
+                        :onerror="store.imgOnError(selectedImage.url)"
                         :alt="selectedImage.prompt || 'Generated image'"
                         class="max-w-full max-h-full object-contain rounded-lg"
                         :width="selectedImage.width"

MyApp/wwwroot/pages/lib/store.mjs

@@ -1333,7 +1333,7 @@ let o = {
     },
     /** Generate a placeholder image with an icon instead of solid black */
     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`
+        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='%23364153'/%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) {
@@ -1352,6 +1352,9 @@ let o = {
                 : this.placeholderImageDataUri()
             : url
     },
+    imgOnError(url) {
+        return `this.src=${JSON.stringify(this.fallbackAssetUrl(url))}`
+    },
 
     // Ratings
     isRatingViewable(artifact) {