I have an API response which contains multiple images.I am using get service to get the text and images on the form.Text is coming but I am facing difficulties in retrieving images from API.Currenting I am providing value in output section but image is not displayed.
Key value from API for my image is:-***
result_data_for_editing.media.mediaPath
My HTML where I want to retrieve my image is:-
<img type="file" id="files" multiple name="media" accept="image/*"/>
<output id="list" value="result_data_for_editing.media.mediaPath"></output>
and the corresponding javascript for creating thumbnails for that image is:-
$(document).on('click', '.browse', function () {
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
});
$(document).on('change', '.file', function () {
$(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
});
//function to create thumbanil of images uploaded on client-side
function handleFileSelect(evt) {
$("#list").html("");
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, validatedfiles, f; f = files[i], validatedfiles = files[i]; i++) {
var reader = new FileReader();
var imagearray = [];
imagearray = files[i];
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumbs_image" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(imagearray);
// Read in the image file as a data URL.
reader.readAsDataURL(imagearray);
}
}
Thanks in advance