Despite the numerous solutions available on Stack Overflow, I am still unable to get any of them to work...
I am faced with the challenge of setting the "src" attribute of an image tag using a byte array obtained from an ajax call to my controller in JavaScript. This task must be carried out client-side as I am dynamically generating some of the HTML content (not included in the provided example)
Below is the view code:
<div>
<button onclick=" loadFromDb(); ">CLICK ME</button>
<img id="imgFromModel" src="data:image/png;base64,@Convert.ToBase64String(Model.Image)" alt="" />
<img id="imgFromScript" src="#" alt=""/>
</div>
And here is the script snippet:
function loadFromDb() {
$.ajax({
url: "/Home/LoadFromDatabase",
async: true,
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (response) {
var base64String = btoa(response.Image);
$("#imgFromScript").attr("src", "data:image/png;base64," + base64String);
}
});
}
The image successfully loads in the "imgFromModel" tag, but for some reason not in the "imgFromScript" tag. Can anyone guide me on how to set the "src" attribute of an image tag with a byte array retrieved from a controller?
Your assistance would be greatly appreciated.