fix(image): always proxy images through API route

This patch updates the front-end to always proxy `<Image>` images
through a resource route to circumvent `cross-origin` policies.

app/components/image.tsx

@@ -1,7 +1,5 @@
 import type { ComponentPropsWithoutRef } from 'react'
 
-import { OPTIMIZE_IMAGES } from 'utils/general'
-
 export function Image({
   optimizerUrl = '/image',
   responsive,
@@ -15,8 +13,6 @@ export function Image({
   responsive?: { maxWidth: number; size: { width: number } }[]
   preload?: boolean
 }) {
-  if (!OPTIMIZE_IMAGES) return <img alt={alt ?? ''} src={src} {...etc} />
-
   const url = `${optimizerUrl}?url=${encodeURIComponent(src)}`
   const props: ComponentPropsWithoutRef<'img'> = {
     src: `${url}&w=${etc.width ?? ''}&q=75`,

app/routes/image.ts

@@ -1,10 +1,12 @@
 import type { LoaderFunction } from '@vercel/remix'
 
+import { OPTIMIZE_IMAGES } from 'utils/general'
+
 export const loader: LoaderFunction = async ({ request }) => {
   const url = new URL(request.url)
   const route = '_vercel/image'
   return fetch(
-    process.env.VERCEL
+    OPTIMIZE_IMAGES && process.env.VERCEL
       ? `${url.protocol}//${url.host}/${route}?${url.searchParams.toString()}`
       : decodeURIComponent(url.searchParams.get('url') ?? ''),
   )