Jquery output preview in realsrc

Question

I'm trying to output the image preview in realsrc instead of src. Is that even possible?

var reader = new FileReader();
reader.onload = function(){
var output = document.getElementById('output_image');
    output.realsrc = reader.result;
}
reader.readAsDataURL( $('#file')[0].files[0]);

score 1 · Accepted Answer · answered Oct 03 '18 at 23:11

Given your code, output.realsrc sets a property called "realsrc", not an attribute.
To set an attribute, use JavaScript's setAttribute().

var reader = new FileReader();
var file = document.getElementById('file');
var output = document.getElementById('output_image');

reader.onload = function() {
  output.setAttribute('realsrc', this.result);
  console.log(output.getAttribute('realsrc'));
}

file.addEventListener('change', function() {
  reader.readAsDataURL(this.files[0]);
});

<input type="file" id="file">
<img id="output_image">

Note that:

... when an element has id or another standard attribute, the corresponding property gets created. But that doesn’t happen if the attribute is non-standard. -- HTML attributes.

Also see:
Javascript for adding a custom attribute to some elements.

Jquery output preview in realsrc

1 Answers1