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;"
            />

<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}`;
})

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"

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?"

Nuxt•9mo ago•

9 replies

the days ahead

proxy images through server

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

<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}`;
})

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"

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?"

proxy images through server

Similar Threads

proxy images through server

Similar Threads

Similar Threads

Similar Threads