Returning an Image
Answered
Arinji posted this in #help-forum
ArinjiOP
Is there a way for me to return a webp image dynamically? So like if you go /images/icon it returns an image file which is like an actual image file so it shows up in discord?
Answered by Asian black bear
This 100% works
export async function GET() {
const imageUrl="..."
const data = await fetch(
imageUrl,
{ cache: "no-cache" },
);
return new Response(data.body);
}51 Replies
Asian black bear
Where do you want it to get the image file from?
Asian black bear
that should be possible using a route.ts file.
ArinjiOP
I was thinking, would middleware work?
Asian black bear
with the edge runtime you can even use streaming an unlimited (?) response size
ArinjiOP
I can like listen for a url, and then rewrite to the actual storage url
Asian black bear
ummm, probably, but now that you can use edge runtime anywhere I don't think the appeal is the same
ArinjiOP
Hmm
Asian black bear
rewriting the url doesn't work the same for external resources, I don't know if next/vercel would allow it
ArinjiOP
Yea tbf
That's what I was thinking
Asian black bear
redirect is always an option
ArinjiOP
The idea of my site is, it makes easy readable links to emojis saved in the db
So ideally it uses like no extensions etc
Asian black bear
ohhh that is fun
ArinjiOP
Yea, that's why I was wondering since my db link is quite large.. my frontend link is not, so If I can somehow get my frontend url to show the backend url image
Asian black bear
are the images really small?
ArinjiOP
Yup, 48×48 webp
Asian black bear
just fetch them from the db and stream them to a Response in an edge api function with wildcard route
ArinjiOP
Issue would be the /api
Asian black bear
for huge files that would be expensive and crappy, but for tiny files?
ohhh in app dir /api is not required
you could do /[emojiSlug]/route.ts
ArinjiOP
..oh is this in the docs?
Asian black bear
and it woudl just be /palm-tree
ArinjiOP
Oh wait you were talking abt api routes and not handlers?
Asian black bear
well, handlers are the "new" api routes in app dir
but they don't have to be in the api folder
you are using the app dir right?
ArinjiOP
Yup
Asian black bear
using
route.ts instead of page.ts makes it an api style routeArinjiOP
That's an interesting idea
Asian black bear
and you can return literally whatever data and headers you want
ArinjiOP
Lemme try it actually, never thought abt it that way
Asian black bear
actually Next/Vercel will even cache the responses if configured properly so it would mostly send emojis from the CDN instead of your function
a quick hint, your route.ts handler will need to return a
new Response(image) where the image is either ReadableStream, TypedArray or Blobso like
const img = await fetch(imageUrl); return new Response(img.body)Asian black bear
This 100% works
export async function GET() {
const imageUrl="..."
const data = await fetch(
imageUrl,
{ cache: "no-cache" },
);
return new Response(data.body);
}Answer
ArinjiOP
i tried out the middleware thing first, and it seemed to work
https://imagee.arinji.com/img@Asian black bear This 100% works
typescript
export async function GET() {
const imageUrl="..."
const data = await fetch(
imageUrl,
{ cache: "no-cache" },
);
return new Response(data.body);
}
ArinjiOP
is there any downside to using the middleware for this?
Asian black bear
mostly the usual middleware stuff like runs for every request and lower quotas/limits. Maybe less effective caching strategies
probably not a big deal either way
ArinjiOP
Hmm yea middleware itself dosent cache, you have to make a server action and have it cache the fetch
I will give your idea a try since middleware invocations is also a thing
@Asian black bear This 100% works
typescript
export async function GET() {
const imageUrl="..."
const data = await fetch(
imageUrl,
{ cache: "no-cache" },
);
return new Response(data.body);
}
ArinjiOP
So I just make a route.tsx inside any folder in the app dir right?
works beautifully