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.
This commit is contained in:
Matthew Raymer
2025-07-03 04:15:26 +00:00
parent be87d38d29
commit 797db7069c
11 changed files with 304 additions and 85 deletions

View File

@@ -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) {