NuxtN
Nuxt•7mo ago•
9 replies
Thick Black W

proxy images through server

In my current setup where on the app side the images are fetched directly from an external source, however, now I'd like to proxy the images through my server, and cache it in the server instead of sending a fetch request to the external source.

here is my app side code code 
<LazyNuxtImg
              :src="`api/image/${image_id}`"
              alt=""
              :modifiers="{ cache: 3600 }"
              style="min-height: 300px;"
            />


I don't know how to write this on the server side "server/api/image/[id].ts"
export default defineEventHandler(async (event) => {
  const id = event.context.params?.id
  
  return fetch(`https:someexternanalsrc.com/${id}`;
})


This doesn't work.
On app side I get the error msg in the console error : {message: "[404] [IPX_FILE_NOT_FOUND] File not found: /api/image//sOmEimAgeidhere.jpg"} message : "[404] [IPX_FILE_NOT_FOUND] File not found: /api/image//sOmEimgAgeidhere.jpg"

... TLDR; I'm simply asking "how to proxy images through the server?"
Was this page helpful?