Sharepoint putting extra "src" information in <img> tags

Hello,

I'm trying to find a resolution to a problem i have never came across previously.

I have created a quill rich text editor where i intend to put text and images that i can store as html in sharepoint lists in order to load it on a custom landing page instead of updating the html code itself every time there is new content.

While storing formatted text works perfectly, i am facing an issue whereas <img> tags get altered by sharepoint by adding an extra URL in them before the actual URL of the image. This makes the <img src="" property incorrect and the image doesnt load. I tried with reading the element from the DOM and altering the property with javacript.replace, but whenever i load the corrected code back to the DOM, sharepoint puts the extra (wrong) link snippet back to its place.

example: 

URL of the image i upload as html code into a list:

<div class=""><p><img class="class" src="https://company.sharepoint.com/sites/PortalName/DocumentLibraryname/image.jpg" data-themekey=""></p></div>

Then what comes out when rendering the DOM is:

<div class=""><p><img class="class" src="https://company.sharepoint.com/pages/%22https://company.sharepoint.com/sites/PortalName/DocumentLibraryname/image.jpg" data-themekey=""></p></div>

Notice the addition of an extra url part in bold. I tried replacing the parts i dont need in "src" with javascript, and even though console.log-ing displays the corrected value, when i put it back as innerHTML to its place, the wrong link gets added back. The process of reading the content of a sharepoint list item, putting it into a var and replacing stuff is connected to an onClick event, therefore document.ready shouldn't be an issue. 

Has anyone face this issue before?

Any help would be much appreciated!

Thanks!