Embed images in an I-Rule with "HTTP::respond content" using only HTML

Hello everyone (this is my first post),

Recently I was asked to write an I-Rule that served an HTML page when our server pool was unavailable. I thought this would be a piece of cake, until they demanded that the page include images.

I did heavy forum searching and found several solutions to serve up images direclty from the F5, but they were all pretty involved/complicated for my tastes, so I came up with, what I believe is a new method.

I encoded the images using the base64 algorithm. There are applications out there to do this, commands built into your OS depending on your machine, and even (my favorite) websites that will do this with the click of a button (great if your running a Microsoft OS). I've used http://www.opinionatedgeek.com/dotnet/tools/base64encode/ with great success. Keep in mind that the encoded image will make for one really long line of text. I have some up to 7,000 characters long.

The following image tag will tell the browser to decode the image (or rather text at this point) on the fly:

img src="data:image/gif;base64,INSERT_ENCODED_TEXT_HERE"

I've attached a sample HTML (txt) file with the F5 image embeded so you can see some funtional HTML.

The process is simple.

1. Encode your image in base64
2. Create your I-Rule with HTTP::respond content
3. Embed the encoded text in your HTML Image Tag

Here is an example outage I-Rule

Hello everyone (this is my first post),

Recently I was asked to write an I-Rule that served an HTML page when our server pool was unavailable. I thought this would be a piece of cake, until they demanded that the page include images.

I did heavy forum searching and found several solutions to serve up images direclty from the F5, but they were all pretty involved/complicated for my tastes, so I came up with, what I believe is a new method.

I encoded the images using the base64 algorithm. There are applications out there to do this, commands built into your OS depending on your machine, and even (my favorite) websites that will do this with the click of a button (great if your running a Microsoft OS). I've used http://www.opinionatedgeek.com/dotnet/tools/base64encode/ with great success. Keep in mind that the encoded image will make for one really long line of text. I have some up to 7,000 characters long.

The following image tag will tell the browser to decode the image (or rather text at this point) on the fly:

img src="data:image/gif;base64,INSERT_ENCODED_TEXT_HERE"

I've attached a sample HTML (txt) file with the F5 image embeded so you can see some funtional HTML.

The process is simple.

1. Encode your image in base64
2. Create your I-Rule with HTTP::respond content
3. Embed the encoded text in your HTML Image Tag

Here is an example outage I-Rule

when HTTP_REQUEST {
    if {[active_members Pool_Name_Here] < 1} {
        HTTP::respond 503 content {
        html>
             body>
                   center>
                          h2>The Following Image has been embedded in this HTML file using base64
                           encodeing
                          img src="data:image/gif;base64,INSERT_ENCODED_TEXT_HERE">
                          hr>I'm sure F5 won't mind me using their logo since this is after all, a document on how to
                          embed images in an F5 HTTP::respond content command
                   /center>
             /body>
        /html>