Issue with Displaying Base64 PNG in HTML img Tag

Support
1

Andy Gaunt:
I am trying to get a base64 png to display after the utility hook is run. I can see the data in the model and if I render it out to an HTML

tag it displays but in the img src it is showing the {{model.base64Image}} vs the returned content. Also if I copy the returned model data and paste in a browser window it displays the image correctly. Any ideas?

"base64Image": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAASwAQAAAAAryhMIAAAofUlEQVR42u3d32/jSJ4Y8CK4EDdAo7nAvUiAodrggMzrbvzSjQiqBRZI3m7/g1sZA1hve71oHE7CaljUeWDm4bA+YF4soCHmP7jHS7C32/QqGF0DjeZDHgbJ5rbJeCIiQZCmRwG6iOaw8i3+kOjfotvUzfSUpoe2Zbs+JqvqW98qkhLiW3ggiUhEIhKpAWGGsgxHbrBE3A60mJzm31ye+t6f8FkcE76jzsJLv3wQLH+kM42FKiJcnzGmmVQfX4N4bbR0OnNAqPtKCfUCCU4dr8XHMcOAjD166ZcB0ZiaIok2Zkw1u9p1yPzXo6fuDiBd4r4cns5fFMjsJf9PvMkiO8Fvjxfkwu8mnWC5exqdfUUJ4cnHx18Nz+z2x/Y1iPvKeGr/zSxYEhI8i4OgQNzZlHZ4J1y6CQ467iXE6C......"

Delfs:
can you show your html code?

Andy Gaunt:
fmbf:

{
            "html": "<p>{{ model.base64Image }}</p>\n<img src='{{ model.base64Image }}' alt=\"Returned image\">",
            "type": "html"
        }

html output (I truncated the base64 code in the copy here to protect the returned image data)

<div class="html-wrapper html-template-render" style="width: 100%;"><p>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAyAAAASwAQAAAAAryhMIAAAofUlEQVR42u3d32/jSJ4Y8CK4EDdAo7nAvUiAodrggMzrbvzSjQiqBRZI3m7/g1sZA1hve71oHE7CaljUeWDm4bA+YF4soCHmP7jHS7C32/QqGF0DjeZDHgbJ5rbJeCIiQZCmRwG6iOaw8i3+kOjfotvUzfSUpoe2Zbs+JqvqW98qkhLiW3ggiUhEIhKpAWGGsgxHbrBE3A60mJzm31ye+t6f8FkcE76jzsJLv3wQLH+kM42FKiJcnzGmmVQfX4N4bbR0OnNAqPtKCfUCCU4dr8XHMcOAjD166ZcB0ZiaIok2Zkw1u9p1yPzXo6fuDiBd4r4cns5fFMjsJf9PvMkiO8Fvjxfkwu8mnWC5exqdfUUJ4cnHx18Nz+z2x/Y1iPvKeGr/zSxYEhI8i4OgQNzZlHZ4J1y6CQ467iXE6C93l1GUIvGy89Uwsp8tr0OOPgfk5QtA7NOdeH66Qj5LkS+Xbmxfj8TnEXINYi+MpyQWyGTZ4e6yhBgj3vw/AnFjfgmhwQpZ8mUsEHv5p9cioyWJXwqEGdhdPsu/ae9ODYOO46UbXYVw3VMFEpAMCR5HNlkq1yIoR2xG1TUyfTo1khRZ2q+j5FLrGgNymiLQhIMoeHxmkqB5LaItOw9e9QGJ+ck5ZJTQSYrYZ/EFhHBPNOECmZ8Fj9Qxn8fXIsM1wtbIs6VAOvHyHz+y7VPGLyJxHzpjdrig9ZwGj7QpPboeGSzJS/ejFIld6JM5ggrkh5odRJeQBFoXj2IHC8QOnBafihKu6Sefj5Z2iuA4joPTS4jraba7vIikTZhHLEOIC4hNyLXIqxH0E9eCziiQoJsj9nI6zBD4bTu4BolcW/R4arsTbrehY10XVoyn7t+4cwgrcQJhZY28hDbVjCMbkOdvLh0uEVZ4dJYh/</p> <img src="{{ model.base64Image }}" alt="Returned Image"></div>

Delfs:
withing html tags you dont use double curly braces like this:

<img src='{{ model.base64Image }}'

Delfs:

<img :src="model.base64Image"

Delfs:
note, the AI assistant can help you with these types of things also

Andy Gaunt:
Cheers Charles… seems I got curly brace happy there :smile:

Delfs:
think of it as
curly braces are for what you see ( mixed into text ) much like << table::field >> is for MF