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

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