Assigning image source created dynamically in javascript

Question

I have this function:

//The img_src is a source of an image 
function myid_templates_editor_create_image(img_src, w, h){ 
    console.log('image source : ' + img_src);
    var body = document.querySelector('body');          
    var image = document.createElement('image');    
    image.id = 'myid_templates_editor_image';   
    image.src = img_src;                
    body.appendChild(image);    
}

After the function is invoked, it successfully creates an image element and append it to the body but the image doesnt show. Why? img_src has the following value:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAYAAAA+s9J6AAAACXBIW…AkBAAAJAQAkBAAAJAQAEBCAABAQgAACQEAAAkBoAr47wDsSs6PZMN9tgAAAABJRU5ErkJggg==

naa.. that value is a base64 encoded value of image.. Which means the argument img_src passed in is not the url to an image but the image itself! — Vijay Dev
– Vijay Dev, Commented Nov 18, 2015 at 5:29
@Aliyah, I tried to decode that img_src value over here, but it turns up as inavalid/empty image. CAn you make sure that the argument img_src value is a valid base64 encoded image value. I also think that value is a bit small. Normally encoded values should have huge # of chanracters — Vijay Dev
– Vijay Dev, Commented Nov 18, 2015 at 5:43

Krupesh Kotecha · Accepted Answer · 2015-11-18 05:32:57Z

3

use img instead of image in createElement

function myid_templates_editor_create_image(img_src, w, h){ 
    console.log(img_src);
    var body = document.querySelector('body');          
    var image = document.createElement('img');    
    image.id = 'myid_templates_editor_image';   
    image.src = img_src;                
    body.appendChild(image);    
}

edited Nov 18, 2015 at 5:32

answered Nov 18, 2015 at 5:29

Krupesh Kotecha

2,4123 gold badges23 silver badges40 bronze badges

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

2 Comments

Vijay Dev Over a year ago

Yep, nice catch! Also its not ddocument.createElement, its document.createElement

Krupesh Kotecha Over a year ago

ddocument.createElement is typo

Collectives™ on Stack Overflow

Assigning image source created dynamically in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related