1 2<!DOCTYPE html> 3<html lang="en"> 4 5 <head> 6 <meta charset="UTF-8" /> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 9 10 <!-- Meta --> 11 <title>Return an image | Edge Functions on Netlify</title> 12 <meta name="description" content="Use Edge Functions to return an image from your project, or an image from the internet." /> 13 14 <!-- Fonts --> 15 <link rel="preload" href="https://example-styles.netlify.app/fonts/PacaembuVar-latin.woff2" as="font" type="font/woff2" crossorigin /> 16 <link rel="preload" href="https://example-styles.netlify.app/fonts/MulishVar-latin.woff2" as="font" type="font/woff2" crossorigin/> 17 18 <!-- Netlify demo styles --> 19 <link rel="stylesheet" href="https://example-styles.netlify.app/styles.css"> 20 21 22 <!-- Favicons --> 23 <meta name="theme-color" content="#ffffff" /> 24 <link rel="icon" href="/favicon.svg" /> 25 <link rel="mask-icon" href="/mask-icon.svg" color="#000000" /> 26 <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> 27 <link rel="manifest" href="/manifest.json" /> 28 29 30 <!-- Open Graph --> 31 <meta name="twitter:card" content="summary_large_image" /> 32 <meta name="twitter:site" content="@netlify" /> 33 <meta name="twitter:creator" content="@netlify" /> 34 35 <meta property="og:url" content="https://edge-functions-examples.netlify.app/example/image" /> 36 <meta property="og:type" content="website" /> 37 <meta property="og:title" content="Return an image" /> 38 <meta property="og:description" content="Use Edge Functions to return an image from your project, or an image from the internet." /> 39 <meta property="og:locale" content="en_US" /> 40 41 <meta property="og:image" content="https://res.cloudinary.com/netlify/image/upload/c_fit,g_west,h_400,co_rgb:FFFFFFFF,l_text:netlify.com:Pacaembu-Bold.ttf_57:Netlify%20Edge%20Functions:%0AReturn%20an%20image,w_1053,x_46/v1619123320/netlify.com/default-og-background-learn-more.png" /> 42 <meta property="og:image:alt" content="A Netlify branded open graph image representing Return an image" /> 43 <meta property="og:image:width" content="1200" /> 44 <meta property="og:image:height" content="630" /> 45 <meta property="og:site_name" content="Edge Functions on Netlify" /> 46 47
47<script src="/lib/highlight.min.js"></script>
47 48
48<script>hljs.highlightAll();</script>
48 49 <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 49-50
49 50 <script async src="https://www.googletagmanager.com/gtag/js?id=
50G-X2FMMZSSS9
vendor: 16 bytes, lines 50-51
50"></script> 51
51<script> 52
vendor: 145 bytes, lines 52-55
52window.dataLayer = window.dataLayer || []; 53 function gtag(){dataLayer.push(arguments);} 54 gtag('js', new Date()); 55 gtag('config', '
55G-X2FMMZSSS9
vendor: 8 bytes, lines 55-56
55'); 56
56</script>
56 57 </head> 58 59 <body> 60 61 <header> 62 <nav> 63 <a href="https://www.netlify.com/"> 64 <img src="https://example-styles.netlify.app/images/logo-netlify-small-monochrome-darkmode.svg" alt="Netlify" class="nf-logo"> 65 </a> 66 <ul> 67 <ul><li>Return an image</li></ul> 68 <ul><a href="/">Edge Functions Examples</a></li> 69 </ul> 70 </nav> 71 <section> 72 <h1>Edge Functions on Netlify</h1> 73 <p>Reference examples for learning about Edge Functions on Netlify.</p> 74 </section> 75 </header> 76 <hr> 77 78 <main> 79 80 81 82 <section> 83 84 <section> 85 <h1>Image Response</h1> 86 <p>You can use Edge Functions to return an image.</p> 87 88 <pre><code>import type { Context } from "@netlify/edge-functions"; 89 90export default async (request: Request, context: Context) => { 91 92 // Return an internal image using a rewrite 93 // This image is stored in the /public directory of this project 94 return new URL("/apple-touch-icon.png", request.url); 95 96 // OR 97 98 // Use fetch() and return the image response 99 const kitten = await fetch("https://placekitten.com/g/300/300"); 100 return kitten; 101}; 102</code></pre> 103 <h2>See this in action</h2> 104 <ul> 105 <li><a href="/image-internal">Return an image stored in your project</a></li> 106 <li><a href="/image-external">Return an image from the internet</a></li> 107 <li>View the code for the internal image request: <a href="https://github.com/netlify/examples/tree/main/examples/edge-functions/netlify/edge-functions/image-internal.ts" target="_BLANK" rel="noopener">image-internal.ts</a></li> 108 <li>View the code for the external image request: <a href="https://github.com/netlify/examples/tree/main/examples/edge-functions/netlify/edge-functions/image-external.ts" target="_BLANK" rel="noopener">image-external.ts</a></li> 109 </ul> 110 </section> 111 112 <p> 113 <a href="/" class="btn-primary">Explore more examples</a> 114 </p> 115 </section> 116 117 118<hr> 119<section> 120 <h2>What are Edge Functions?</h2> 121 <p>Using JavaScript and TypeScript, <a href="https://www.netlify.com/products/?utm_campaign=devex&utm_source=edge-functions-examples&utm_medium=web&utm_content=Edge%20Functions%20Product%20Page#netlify-edge-functions" target="_blank" rel="noopener">Netlify Edge Functions</a> give you the power to modify network requests to localize content, serve relevant ads, authenticate visitors, A/B test content, and much more! 122 <p> 123 This all happens at the <strong>Edge</strong> â directly from the worldwide location closest to each user.</p> 124 </p> 125 126 <blockquote> 127 <p>To use Edge Functions on Netlify, add JavaScript or TypeScript files to a <code>/netlify/edge-functions</code> directory in your project.</p> 128 <p><a href="https://docs.netlify.com/edge-functions/overview/?utm_campaign=devex&utm_source=edge-functions-examples&utm_medium=web&utm_content=Edge%20Functions%20Docs" target="_blank" rel="noopener">Learn more in the docs</a>.</p> 129 </blockquote> 130 </section> 131 132 <hr/> 133 <section> 134 <h3>Deploy this site to Netlify</h3> 135 <p> 136 Try out Edge Functions on Netlify today! Click the button below to deploy this site with all of its demos to your Netlify account. 137 </p> 138 <p> 139 <a href="https://app.netlify.com/start/deploy?repository=https://github.com/netlify/examples/&create_from_path=examples/edge-functions/&utm_campaign=dx-examples&utm_source=edge-functions-examples&utm_medium=web&utm_content=Deploy%20Edge%20Functions%20Examples%20to%20Netlify"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify"></a> 140 </p> 141 </section> 142 143 </main> 144 145 146 <footer> 147 <div class="flex-btwn"> 148 <a href="https://www.netlify.com/"><img src="https://example-styles.netlify.app//images/logo-netlify-small-monochrome-lightmode.svg" class="nf-logo" alt="Netlify logo"></a> 149 <div class="social-icons"> 150 <a href="https://youtube.com/Netlify"><img src="https://example-styles.netlify.app/icons/youtube.svg" alt="YouTube"></a> 151 <a href="https://github.com/netlify/examples"><img src="https://example-styles.netlify.app/icons/github.svg" alt="GitHub"></a> 152 <a href="https://x.com/Netlify"><img src="https://example-styles.netlify.app/icons/twitter.svg" alt="X"></a> 153 <a href="https://linkedin.com/company/Netlify"><img src="https://example-styles.netlify.app/icons/linkedin.svg" alt="LinkedIn"></a> 154 <a href="https://answers.netlify.com"><img src="https://example-styles.netlify.app/icons/discourse.svg" alt="Netlify Answers"></a> 155 </div> 156 </div> 157 <div class="links-container"> 158 <section> 159 <h3>Developers</h3> 160 <ul role="list"> 161 <li><a href="https://developers.netlify.com/">Netlify Developers</a></li> 162 <li><a href="https://developers.netlify.com/sdk/">
162Netlify SDK</a></li> 163 <li><a href="https://developers.netlify.com/cli/">Netlify CLI</a></li> 164 <li><a href="https://developers.netlify.com/feed/">Activity Feed</a></li> 165 <li><a href="https://docs.netlify.com">Documentation</a></li> 166 <li><a href="https://netlify.com/conference/">Compose Conference</a></li> 167 </ul> 168 </section> 169 <section> 170 <h3>Company</h3> 171 <ul role="list"> 172 <li><a href="https://netlify.com/blog/">Blog</a></li> 173 <li><a href="https://netlify.com/about/">About</a></li> 174 <li><a href="https://netlify.com/careers/">Careers</a></li> 175 176 <li><a href="https://netlify.com/press/">Press</a></li> 177 <li><a href="https://swag.netlify.com/">Netlify Store</a></li> 178 <li><a href="https://netlify.com/sustainability/">Sustainability</a></li> 179 </ul> 180 </section> 181 <section> 182 <h3>Contact Us</h3> 183 <ul role="list"> 184 <li><a id="cta-footer-sales" href="https://netlify.com/enterprise/contact/">Sales</a></li> 185 <li><a id="cta-footer-support" href="https://netlify.com/support/">Support</a></li> 186 <li><a id="cta-footer-status" href="https://netlifystatus.com/">Status</a></li> 187 <li><a id="cta-footer-answers" href="https://answers.netlify.com/">Forums</a></li> 188 <li><a id="cta-footer-agencyDirectory" href="https://netlify.com/agency-directory/">Hire an Agency</a></li> 189 </ul> 190 </section> 191 </div> 192 <small> 193 <ul> 194 <li><a href="https://netlify.com/trust-center/">Trust Center</a></li> 195 <li><a href="https://netlify.com/privacy/">Privacy</a></li> 196 <li><a href="https://netlify.com/security/">Security</a></li> 197 <li><a href="https://netlify.com/gdpr-ccpa/">GDPR/CCPA</a></li> 198 <li><a href="mailto:[email protected]?subject=Abuse%20report&body=Please%20include%20the%20site%20URL%20and%20reason%20for%20your%20report%2C%20and%20we%20will%20reply%20promptly.">Abuse</a></li> 199 </ul> 200 <div>© 2025 Netlify</div> 201 </small> 202 </footer> 203 204 </body> 205</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.