Assign Base64 string to an image in javascript

Question

I already wasted a lot of time on a basic problem, I have a .cshtml razor view that have a model of type DataTable and this datatable have some TableRows with one column that stores an image byte array. how can I assign this model value to an image element in the view. this is what I've came up so far.

 var binaryData = @Convert.ToBase64String(Model.Rows[0][0] as Byte[]);
    var img = document.getElementById('ImgEle')
                      .setAttribute('src', "data:image/jpg;base64," + binaryData);

I'm receiving this error at chrome console window : Uncaught SyntaxError: Invalid regular expression flags

how can I fix this problem?

Edit:

Thanks to @hiltononline answer this is the code I'm ended up with and its working fine

var binaryData='@Convert.ToBase64String(Model.Rows[0][0] as Byte[])';
var img = document.getElementById("ImgEle");
img.setAttribute("src", "data:image/jpg;base64," + binaryData);

Hope this will help somebody.

Miraj50 · Accepted Answer · 2019-01-02 13:37:59Z

2

The value of binaryData needs to be wrapped in single quotes to be treated as a string:

var binaryData='@Convert.ToBase64String(Model.Rows[0][0] as Byte[])';

An alternative could be to insert the model value in the setAttribute method directly:

var img = document.getElementById("ImgEle");
img.setAttribute("src", "data:image/jpg;base64,@Convert.ToBase64String(Model.Rows[0][0] as Byte[])");

Additionally, depending on how the data is stored, it may not need to be decoded again. You can double check the byte array is valid using an online decoder such as CodeBeautify's base64-to-image-converter

edited Jan 2, 2019 at 13:37

Miraj50

4,4471 gold badge25 silver badges37 bronze badges

answered Dec 31, 2018 at 15:20

hiltononline

5362 silver badges6 bronze badges

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

3 Comments

Voice Of The Rain Over a year ago

the second is not working the same error message appear, the first option is correct and I have to check on the base64 if its valid.

Voice Of The Rain Over a year ago

I had checked on the base64 generated and its valid unfortunately the image not showing on the view any thoughts?

hiltononline Over a year ago

@VoiceOfTheRain If the image is not displaying, without additional information, my guess is that binaryData is an empty string or it is not formatted correctly. Can you debug the javascript to find the binaryData value or inspect the img element and share the src?

jesus2099 · Accepted Answer · 2018-12-31 14:02:46Z

0

I only know about how to display a base64 image string as tag in javascript so if your error is just at this level, good news — otherwise I cannot really help you with the first row (binaryData):

var binaryData = @Convert.ToBase64String(Model.Rows[0][0] as Byte[]);
var img = document.getElementById("ImgEle");
img.setAttribute("src", "data:image/jpg;base64," + binaryData);

I think you just forgot the name of the attribute (src) you wanted to set with setAttribute and that you messed up with the img variable assignation.

edited Dec 31, 2018 at 14:02

answered Dec 31, 2018 at 13:54

jesus2099

956 bronze badges

6 Comments

Voice Of The Rain Over a year ago

I've edited my question by mistake, the problem has nothing to do with this.

jesus2099 Over a year ago

Just to make sure, there is another issue with your second line as you wrote var img = ….setAttribute(…); But setAttribute always returns undefined developer.mozilla.org/en-US/docs/Web/API/Element/… — You have to split that line in two or to remove your assignment.

jesus2099 Over a year ago

No idea about razor but javascript accepts both single and double quotes.

wjervis Over a year ago

If the base64 conversion results in a string that contains /, that'd explain why the error is complaining about invalid regex. Putting quotes around the razor (double or single) should fix that: var binaryData = '@Convert.ToBase64String(Model.Rows[0][0] as Byte[])';

Voice Of The Rain Over a year ago

@wjervis wrapping the razor with double quotes solve it however fell into another issue data:image/jpeg;base64,%C3%BF%C3%98%C3%BF%C3%A0%00%10JFIF%00%01%01%00%00%01%00%01%00%00%C3%BF%C3%9B%00C%00%08%06%06%07%06%05%08%07%07%07%09%09%08%0A%0C%14%0D%0C%0B%0B%0C%19%12%13%0F%14%1D%1A%1F%1E%1D%1A%1C%1C $.'A0%02%C2%8A(%C2%A0%02%C2%8A(%C2%A0%02%C2%8A(%C2%A0%02%C2%8A(%C2%A0%02%C2%8A(%C2%A0%02%C2%8A(%C2%A0%02%C2%8A(%C2%A0%02%C2%8A%00%08%06%06%07%06%05%08%07%07%07%09%09%08%0A%0C%14%0D%0C%0B%0B%0C%19%12%13%0F%14%1D%1A%1F%1E%1D%1A%1C%1C $.' ", net::ERR_INVALID_URL

|

Collectives™ on Stack Overflow

Assign Base64 string to an image in javascript

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related