Bsrgvty

I want to change Image src using jquery in magento2,

So how can I get Imageurl in jQuery?

 <field name="default_template">
 <argument name="data" xsi:type="array">
 <item name="options" xsi:type="object">KtplBannerManagementModelConfigSourceTemplate</item>
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string">Demo template</item>
 <item name="visible" xsi:type="boolean">true</item>
 <item name="dataType" xsi:type="string">select</item>
 <item name="formElement" xsi:type="string">select</item>
 <item name="dataScope" xsi:type="string">default_template</item>
 <item name="component" xsi:type="string">Ktpl_BannerManagement/js/form/element/defaultTemplate</item>
 </item>
 </argument>
 </field>
 <field name="default_image">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="visible" xsi:type="boolean">true</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="elementTmpl" xsi:type="string">Ktpl_BannerManagement/form/element/defaultTemplate</item>
 </item>
 </argument>
 </field>

defaultTemplate.html

 <img alt="demo" class="article_image" id="mp-demo-image">
 <div class="admin__field field field-load_template " data-ui-id="ktpl-bannerslider-banner-edit-tab-banner-fieldset-element-form-field-load-template" style="">
 <label class="label admin__field-label" for="banner_load_template" data-ui-id="ktpl-bannerslider-banner-edit-tab-banner-fieldset-element-note-banner-label"><span></span></label>
 <div class="admin__field-control control">
 <div id="banner_load_template" class="control-value admin__field-value" style=""><button id="id_lq27ZKqKzkY3i4p7JLoi57aNy7f2PDSk" title="Load Template" type="button" class="action-default scalable" data-ui-id="widget-button-0">
 <span>Load Template</span>
 </button>
 </div>
 </div>
 </div>

if I will update default_template value I want to change default_image src using jQuery

You can add JS following way in your .phtml file

<script type="text/x-magento-init">

 "*": 
 "Vendor_Module/js/custom-js": 
 "imageURL": "<?= $imageUrl; ?>"
 
 

</script>

Now in your custom JS file you can get your Image URL using following way.

So in Vendor_Module/web/js/custom-js.js file your JS code look like below.

define([
 "jquery"
 ], function($)
 "use strict";

 function customFunction(config, element) 
 var imgURL = config.imageURL; //config.imageURL is already defined in your .phtml file
 ; 
 return customFunction; 
 );