Fix image CORS violations with comprehensive proxy and component updates

- Applied transformImageUrlForCors to all image-displaying components
- Added followRedirects: true to image proxy to serve actual content
- Proxy now returns 200 OK with image data instead of 301 redirects
- Maintains CORS headers required for SharedArrayBuffer support
- Added debug logging for proxy response monitoring

Resolves all image loading failures in development environment.

src/components/ActivityListItem.vue

@@ -63,7 +63,7 @@
       <div
         v-if="record.image"
         class="bg-cover mb-2 -mt-3 sm:-mt-4 -mx-3 sm:-mx-4"
-        :style="`background-image: url(${record.image});`"
+        :style="`background-image: url(${transformImageUrlForCors(record.image)});`"
       >
         <a
           class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer"
@@ -71,7 +71,7 @@
         >
           <img
             class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
-            :src="record.image"
+            :src="transformImageUrlForCors(record.image)"
             alt="Activity image"
             @load="cacheImage(record.image)"
           />
@@ -251,7 +251,11 @@
 import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
 import { GiveRecordWithContactInfo } from "../types";
 import EntityIcon from "./EntityIcon.vue";
-import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
+import {
+  isGiveClaimType,
+  notifyWhyCannotConfirm,
+  transformImageUrlForCors,
+} from "../libs/util";
 import { containsHiddenDid, isHiddenDid } from "../libs/endorserServer";
 import ProjectIcon from "./ProjectIcon.vue";
 import { NotificationIface } from "../constants/app";
@@ -360,5 +364,9 @@ export default class ActivityListItem extends Vue {
       day: "numeric",
     });
   }
+
+  transformImageUrlForCors(imageUrl: string): string {
+    return transformImageUrlForCors(imageUrl);
+  }
 }
 </script>

src/components/EntityIcon.vue

@@ -7,6 +7,7 @@ import { createAvatar, StyleOptions } from "@dicebear/core";
 import { avataaars } from "@dicebear/collection";
 import { Vue, Component, Prop } from "vue-facing-decorator";
 import { Contact } from "../db/tables/contacts";
+import { transformImageUrlForCors } from "../libs/util";
 
 @Component
 export default class EntityIcon extends Vue {
@@ -18,7 +19,7 @@ export default class EntityIcon extends Vue {
   generateIcon() {
     const imageUrl = this.contact?.profileImageUrl || this.profileImageUrl;
     if (imageUrl) {
-      return `<img src="${imageUrl}" class="rounded" width="${this.iconSize}" height="${this.iconSize}" />`;
+      return `<img src="${transformImageUrlForCors(imageUrl)}" class="rounded" width="${this.iconSize}" height="${this.iconSize}" />`;
     } else {
       const identifier = this.contact?.did || this.entityId;
       if (!identifier) {

src/components/ImageViewer.vue

@@ -25,7 +25,7 @@
         <div class="flex-1 flex items-center justify-center p-2">
           <div class="w-full h-full flex items-center justify-center">
             <img
-              :src="imageUrl"
+              :src="transformedImageUrl"
               class="max-h-[calc(100vh-5rem)] w-full h-full object-contain"
               alt="expanded shared content"
               @click="close"
@@ -41,6 +41,7 @@
 import { Component, Vue, Prop } from "vue-facing-decorator";
 import { UAParser } from "ua-parser-js";
 import { logger } from "../utils/logger";
+import { transformImageUrlForCors } from "../libs/util";
 
 @Component({ emits: ["update:isOpen"] })
 export default class ImageViewer extends Vue {
@@ -79,6 +80,10 @@ export default class ImageViewer extends Vue {
       window.open(this.imageUrl, "_blank");
     }
   }
+
+  get transformedImageUrl() {
+    return transformImageUrlForCors(this.imageUrl);
+  }
 }
 </script>
 

src/components/ProjectIcon.vue

@@ -13,6 +13,7 @@
 <script lang="ts">
 import { toSvg } from "jdenticon";
 import { Vue, Component, Prop } from "vue-facing-decorator";
+import { transformImageUrlForCors } from "../libs/util";
 
 const BLANK_CONFIG = {
   lightness: {
@@ -35,7 +36,7 @@ export default class ProjectIcon extends Vue {
 
   generateIcon() {
     if (this.imageUrl) {
-      return `<img src="${this.imageUrl}" class="w-full h-full object-contain" />`;
+      return `<img src="${transformImageUrlForCors(this.imageUrl)}" class="w-full h-full object-contain" />`;
     } else {
       const config = this.entityId ? undefined : BLANK_CONFIG;
       const svgString = toSvg(this.entityId, this.iconSize, config);