sharepoint online – SPfx Client Side assets relative url image in Jquery


How do I reference an image which is included inside clientsideassets?
I was successful in showing the image when I use below option when embedding require inside the img src.:
But issue is when onclick jquery is trying to change the src attribute.

<img  id="ChatopenerId" src={require('../../assets/SnowChatOpen.png')} style={{width:'50px'}}/>
var x = document.getElementById("chatWindow");
    if (x.style.display === "none") {
    jQuery("#ChatopenerId").attr('src', 'https://localhost:4321/dist/snowchatclose_6d3b19b01f2c47584b87e20ad66d7eb9.png');
      x.style.display = "block";
    } else {
    jQuery("#ChatopenerId").attr('src', 'https://localhost:4321/dist/snowchatopen_e08731b7308f6ec26ab4090eb0318b14.png');
      x.style.display = "none";
    }

Its working fine in local host when debugging, but since Spfx 1.4 onwards includes all the assets inside the package automatically, I am able to see them inside the package.
But how do I refer those inside the jquery?

jQuery(“#ChatopenerId”).attr(‘src’, ‘../../assets/SnowChatOpen.png’);
jQuery(“#ChatopenerId”).attr(‘src’,’require(‘../../assets/SnowChatOpen.png’)’);
jQuery(“#ChatopenerId”).attr(‘src’,’sharepointsolutiondebugClientSideAssetssnowchatopen_e08731b7308f6ec26ab4090eb0318b14.png’);

const chatopen:any=require('../../assets/SnowChatOpen.png');
const chatclose:any=require('../../assets/SnowChatClose.png');

ClienSideAssets

Original URL when checked in network debug console:
https://localhost:4321/dist/snowchatopen_e08731b7308f6ec26ab4090eb0318b14.png
https://mydomain.sharepoint.com/sites/appcatalog/ClientSideAssets/08f139bd-0000-0000-0000-edaabb91f33d/snowchatopen_000031b7308f6ec0000090eb0318b14.png