Returning an Image from a DataScript

The avi.http.response function returns a simple web page, such as a custom 404 error page. However, making such a page more seamless or branded may require incorporating images, icons, or pictures. DataScripts can serve these images, but it requires a few extra steps.

When a client requests an image, or an HTML page that has an image embedded within it, the DataScript can return the image, however the image must first be converted to Base64 encoding. There are many free sites that will do this. Upload the desired image to a site such as www.browserling.com/tools/image-to-base64; it will convert the image to a Base64-encoded version. Copy and paste the encoded output into your DataScript. In the HTML below, replace the xxxx with the Base64-encoded image. Also change the image type to the appropriate, such as GIF, JPEG or PNG.

<img src='data:image/gif;base64, xxxx' />

The images can be embedded within the HTML or as standalone requests. DataScripts can be any size, so using larger images is not an issue.

Example

--
--  This simple page returns an embedded GIF within the HTML
--
page = "<html><body><p><center><b>Here is a sample embedded image served from a DataScript</b></p>"
page = page .. "<img style='display:block; width:80px;height:80px;' src='data:image/gif;base64, R0lGODlhCAAIAOYAAP//////AP8A//8AAAD//wD/AAAA/wAAAPQAXfoAu/8GwPQG8PIE+uoC/7sB+rUC/60B/54J/24A/FYA/FIA/0wA/z0A8R8A9BkA/xEA8AoA+A0A9w0D+g4m+gAk/QAx+QA3/gA89gBL/wlQ/w9v+gF7/wCF/wCV/wCb/wCt/wC1/wS9/gDS/wDa/wDl/wfo/gzs/wrz/wD9/wD/6gD/3Qf/1Qf/zA3/zAD/yAD7jwP/iAr8dgD7bAD/ZwD4PgD+LgD/IgH8Gw7/Dh//CR/9AFz+AGX9ALD/Bf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEgALAAAAAAIAAgAAAdCgAgJDREWGyMrCgsQFRkiKjEMDxQaICkyOA4THCEoMDY8EhcfJy83Oz8YHSYuNT1BQx4lLTQ6QERGJCwzOT5CRUeBADs=' />"
page = page .. "</center></body></html>"
avi.http.response(200, {content_type="text/html"}, page)