this is what I want

Author: kentcdodds

app/routes/resources+/images.tsx

@@ -1,5 +1,8 @@
+import { invariantResponse } from '@epic-web/invariant'
 import { getImgResponse } from 'openimg/node'
+import { prisma } from '#app/utils/db.server.ts'
 import { getDomainUrl } from '#app/utils/misc.tsx'
+import { getSignedGetRequestInfo } from '#app/utils/storage.server.ts'
 import { type Route } from './+types/images.ts'
 
 export async function loader({ request }: Route.LoaderArgs) {
@@ -17,6 +20,16 @@ export async function loader({ request }: Route.LoaderArgs) {
 				: './tests/fixtures/openimg',
 		getImgSource: ({ params }) => {
 			if (params.src.startsWith('/resources')) {
+				const searchParams = new URLSearchParams(params.src.split('?')[1])
+				const userImageId = searchParams.get('userImageId')
+				if (userImageId) {
+					return handleUserImage(userImageId)
+				}
+				const noteImageId = searchParams.get('noteImageId')
+				if (noteImageId) {
+					return handleNoteImage(noteImageId)
+				}
+
 				// Fetch image from resource endpoint
 				return {
 					type: 'fetch',
@@ -46,3 +59,33 @@ export async function loader({ request }: Route.LoaderArgs) {
 		},
 	})
 }
+
+async function handleUserImage(userImageId: string) {
+	const userImage = await prisma.userImage.findUnique({
+		where: { id: userImageId },
+		select: { objectKey: true },
+	})
+	invariantResponse(userImage, 'User image not found', { status: 404 })
+
+	const { url, headers } = getSignedGetRequestInfo(userImage.objectKey)
+	return {
+		type: 'fetch',
+		url,
+		headers,
+	}
+}
+
+async function handleNoteImage(noteImageId: string) {
+	const noteImage = await prisma.noteImage.findUnique({
+		where: { id: noteImageId },
+		select: { objectKey: true },
+	})
+	invariantResponse(noteImage, 'Note image not found', { status: 404 })
+
+	const { url, headers } = getSignedGetRequestInfo(noteImage.objectKey)
+	return {
+		type: 'fetch',
+		url,
+		headers,
+	}
+}

app/routes/resources+/note-images.$imageId.tsx

@@ -2,9 +2,9 @@ import { getFormProps, getInputProps, useForm } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { invariantResponse } from '@epic-web/invariant'
 import { type SEOHandle } from '@nasa-gcn/remix-seo'
+import { Img } from 'openimg/react'
 import { data, Link, useFetcher } from 'react-router'
 import { z } from 'zod'
-import { Img } from 'openimg/react'
 import { ErrorList, Field } from '#app/components/forms.tsx'
 import { Button } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'

app/routes/resources+/user-images.$imageId.tsx

@@ -6,11 +6,11 @@ import { extendTailwindMerge } from 'tailwind-merge'
 import { extendedTheme } from './extended-theme.ts'
 
 export function getUserImgSrc(imageId?: string | null) {
-	return imageId ? `/resources/user-images/${imageId}` : '/img/user.png'
+	return imageId ? `/resources/images?userImageId=${imageId}` : '/img/user.png'
 }
 
 export function getNoteImgSrc(imageId: string) {
-	return `/resources/note-images/${imageId}`
+	return `/resources/images?noteImageId=${imageId}`
 }
 
 export function getErrorMessage(error: unknown) {

app/routes/settings+/profile.index.tsx

@@ -19,10 +19,6 @@ server.listen({
 		if (request.url.includes('.sentry.io')) {
 			return
 		}
-		// Do not print warnings on unhandled requests to ourselves
-		if (request.url.includes(`localhost:${process.env.PORT}`)) {
-			return
-		}
 		// Print the regular MSW unhandled request warning otherwise.
 		print.warning()
 	},