Image proxy

[slow isle]

I'm working on a project where I've set up an API route (api/proxy) with the intention of downloading images and serving them to the client-side. This is to facilitate the use of images from Instagram's CDN in my frontend application.

While I am able to receive the URL from my API, I'm encountering an issue where the image isn't rendering correctly when I use <img src={response} /> in my React component. The image doesn't appear as expected.

Could anyone offer some insights or advice on this matter? It's worth noting that when I implement similar logic in a standalone server setup, it works fine and the images are displayed correctly on the client-side.

Thank you in advance!

[spice adder]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[exotic knot]

hi, try return fetch(imageUrl) in the GET route handler

[slow isle]

Like this?

[exotic knot]

import { NextRequest, NextResponse } from "next/server";

export function GET(req: NextRequest) {
  const searchParams = new URL(req.url).searchParams;
  const imageUrl = searchParams.get("url");
  if (typeof imageUrl !== "string" || !imageUrl.startsWith('http')) {
    return new NextResponse("Url is required", { status: 400 });
  }

  try {
    return fetch(imageUrl);
  } catch (error) {
    return new NextResponse("Error fetching image", { status: 500 });
  }
}

[slow isle]

Yo Ray, you the best. No its working.

The reason that I have to return the fetch is because the logic to create the image is already being handles in the client?

[exotic knot]

yes

does it work?

[slow isle]

Yes it works, thanks a lot

[exotic knot]

cool, please mark solution

keep in mind that the second argument for route handler in app router is not res

[spice adder]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1183720836285341726 message)

[slow isle]

Thanks