Add API endpoint that renders an image

We can return an image from an API endpoint. The image must be passed as
a buffer.

Author: FinnWoelm

pages/api/image.js

@@ -0,0 +1,11 @@
+import rick from "buffer-loader!../../rick.jpg";
+
+export default (req, res) => {
+  res.status(200);
+  res.setHeader("Content-Type", "image/jpeg");
+  // Send the image buffer. There are many other ways to send images and other
+  // files. For example, you can create a buffer from a base64-encoded string
+  // of an image: https://stackoverflow.com/a/28440633/6451879
+  // res.send(Buffer.from(%BASE64-STRING%, "base64"))
+  res.send(rick);
+};

pages/index.js

@@ -135,6 +135,17 @@ const Index = () => (
           with content-type XML
         </a>
       </li>
+      <li>
+        <a href='/api/image'>
+          with image response
+        </a>
+        {' '}
+        (
+        <a href='https://github.com/FinnWoelm/next-on-netlify-demo/tree/master/pages/api/image.js'>
+          code
+        </a>
+        )
+      </li>
     </ul>
 
     <h2>Preview Mode</h2>