Displaying a C# asp string in an html frontend iframe - string format "data:image/bmp;base64," + base64 encoded

Question

I have an html with asp C# backend application, where I would like to display a string in the format "data:image/bmp;base64," + base64 encoded string inside an iframe.
The server code is generating the string:

using (MemoryStream stream = new MemoryStream())
{
   bitmap.Save(stream, ImageFormat.Bmp);
   stream.Position = 0;
   content = Convert.ToBase64String(stream.ToArray()); // base64EncodedString
}

and the front-end iframe should display it upon button press:

<form method="POST" runat="server">
   <asp:Button runat="server" id="button1" class="btn" Text="Next"/>
   <iframe id="iframe" runat="server" class="iframe"></iframe>
</form>
<script>
   window.onload = function () {
     document.getElementById("<%=iframe.ClientID %>").src="data:image/bmp;base64,"+"<%=content %>";
   }
</script>

The content field is populated and shared correctly (as can be displayed in an alert), for example; "data:image/bmp;base64,Qk1aAAAAAAAAAEIAAAAoAAAABgAAAAYAAAABAAQAAAAAAAAAAADEDgAAxA4AAAMAAAADAAAAAAAA/wAA//8A2P//IAEgAAASAAABIAEAEgASACABIAAAEgAA" but the iframe remains blank.

Can you suggest what causes it and how to fix that? thanks!

I have tried using different models of front-back communication including json, ajax,etc. I have also tried to update the iframe src from the asp server side, but as the content variable is correct, I assume the issue is with the front-end.

Albert D. Kallal · Accepted Answer · 2023-01-12 18:02:28Z

0

Well, is the goal that you "must" use a iframe, or do you care?

I mean, why not just drop in a image control, or even a "div", and shove the image string into that div or image control?

So, lets drop a button, and then say pull a row from a database that has one column with a binary image. By converting that binary image to a base64 image string, we are free to shove that string into the image.

So, say this markup:

        <asp:Button ID="Button1" runat="server" Text="Get Image" OnClick="Button1_Click" />
        <br />
        <h3>My Image control</h3>
        <asp:Image ID="Image1" runat="server" Width="350px" />
        <br />

        <h3>My div</h3>
        <div id="mydiv" runat="server">
        </div>

And then the code behind:

protected void Button1_Click(object sender, EventArgs e)
{
    using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
    {
        string strSQL =
            "SELECT ID, MyImage FROM Fighters WHERE ID = 4";
        using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
        {
            conn.Open();
            DataTable rstData = new DataTable();
            rstData.Load(cmdSQL.ExecuteReader());
            string PicString = 
                @"Data:Image/png;base64," + Convert.ToBase64String((byte[])rstData.Rows[0]["MyImage"]);

            Image1.ImageUrl = PicString;        // shove into image control

            Image MyImage = new Image();
            MyImage.Width = 200;
            MyImage.ImageUrl = PicString;
            mydiv.Controls.Add(MyImage);          // add image to "div"
        }
    }
}

So, now when we click the button, we get this:

So, it not all that clear if you need/want a iFrame or not???

answered Jan 12, 2023 at 18:02

Albert D. Kallal

50.1k3 gold badges41 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Eran Over a year ago

thank you. Evidently, it was not an issue of iframe or image, it actually did not map my resource correctly.

Eran Over a year ago

I have implemented your proposal and as they worked, I attempted to understand the gap between the two options. Again, thanks a lot.

Albert D. Kallal Over a year ago

We in the 2nd div example creating a control in code, and then "appended" or added the control to the div. However, we could have also used Mydiv.InnerHTML = "<img src=">. In other words, we could have constructed the correct HTML in code along with that "image string" and that also would work. so that "create" image control for the 2nd example actually cranks out plain jane markup that we appended to the "div". However each of the above 2 examples are fine, and I in fact prefer the 1st approach, and I often do that for a grid view (drop in a image control, and feed it that base 64 string

Collectives™ on Stack Overflow

Displaying a C# asp string in an html frontend iframe - string format "data:image/bmp;base64," + base64 encoded

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related