Magento 2: How to display thumbnail of the image when upload image without ui_component

Question

I want to display preview/thumbnail of the image as per mention in image when i upload image in admin panel. How it is possible without ui_component?

Please help me.

Thanks in advance :) enter image description here

$image11 = $fieldset->addField(
 'image',
 'image',
 [
 'name' => 'image',
 'label' => __('Background Image'),
 'title' => __('Background Image'),
 'tabindex' => 1,
 'onchange' => 'imagechange(this)',
 ],'text'
 );

I used dependency in this field..when I select background type image, then background image field will be show . But 'background image' label is not hide because of 'after_element_html'. How can i hide 'Background Image' label use with the use of 'after_element_html'

Answer 1

You can get output like this :

$image11 = $fieldset->addField(
 'image',
 'image',
 [
 'name' => 'image',
 'label' => __('Background Image'),
 'title' => __('Background Image'),
 'tabindex' => 1,
 'onchange' => 'imagechange(this)',
 ],'text'
 );

After you can set with help of imagechange function and display image thumbnail of the image when upload :

function imagechange(input)
{
 require(['jquery'], function($)
 {
 $('#preimage').remove();
 var table_html = "<img alt='' width='22' height='22' id='preimage' name='preimage'>";
 $('#page_image').before(table_html);
 if (input.files && input.files[0]){
 var reader = new FileReader();
 reader.onload = function (e){
 jQuery('#preimage').attr('src', e.target.result);
 }
 reader.readAsDataURL(input.files[0]);
 }
 });
}