Image Response
You can use Edge Functions to return an image.
import type { Context } from "netlify:edge";
export default async (request: Request, context: Context) => {
// Return an internal image using context.rewrite()
// This image is stored in the /public directory of this project
return context.rewrite("/apple-touch-icon.png");
// OR
// Use fetch() and return the image response
const kitten = await fetch("https://placekitten.com/g/300/300");
return kitten;
};
See this in action
- Return an image stored in your project
- Return an image from the internet
- View the code for the internal image request: image-internal.ts
- View the code for the external image request: image-external.ts
What are Edge Functions?
Using JavaScript and TypeScript, Netlify Edge Functions give you the power to modify network requests to localize content, serve relevant ads, authenticate visitors, A/B test content, and much more! And this all happens at the Edge — directly from the worldwide location closest to each user.
To use Edge Functions on Netlify, add JavaScript or TypeScript files to an edge-functions directory in your project, and add [[edge_functions]] entries to your netlify.toml file.
Deploy this site to Netlify
Try out Edge Functions on Netlify today! Click the button below to deploy this site with all of its demos to your Netlify account.
Deploy to Netlify