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

Question

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 (using SP Services) 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. I'm using SP Services to upload images to a document library. 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/%22**https://company.sharepoint.com/sites/PortalName/DocumentLibraryname/image.jpg" data-themekey="">
  </p>
</div>

i changed the opening and closing characters on purpose so this thread can accept it

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!

*update 20.02.2020. I have managed to resolve the issue by implementing a workaround as i don't have access to back-end. I wait for the page to render the images with incorrect SRC, then i loop through the images with JS and update attributes.

var functionalityArticle = [];

function getFunctionalityArticleContent() {

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
    LoadFunctionalityArticle('313681bb-f0bb-44aa-9c0d-ee387cd08991');
    console.log("list read");
});

};

function LoadFunctionalityArticle(listId5) {

var context5 = SP.ClientContext.get_current();
var web5 = context5.get_web();
var list5 = web5.get_lists().getById(listId5);


var query5 = new SP.CamlQuery();
query5.set_viewXml();

var allItems5 = list5.getItems(query5);

context5.load(allItems5, 'Include(Title, Content)'); 

context5.executeQueryAsync(Function.createDelegate(this, function () {

    onQuerySuccessLAV5(allItems5, function () {
        console.log("Functionality article content imported");


    });
}),
    Function.createDelegate(this, this.onQueryFailedLAV));

};

function onQuerySuccessLAV5(allItems5, callback) { console.log("success5"); var ListEnumerator5 = allItems5.getEnumerator(); functionalityArticle = [];

while (ListEnumerator5.moveNext()) {
    var listItemInfo = '';
    var currentItem5 = ListEnumerator5.get_current();


    /*upload list items into an array*/

    functionalityArticle.push({

        'Title': currentItem5.get_item('Title'),
        'Input': currentItem5.get_item('Content')

    });

}

callback();

inputFunctionalityContent();

};

function onQueryFailedEmp(sender, args) { alert('Error: ' + args.get_message() + '\n' + args.get_stackTrace()); };

function inputFunctionalityContent() { functionalityArticle.forEach(function (entry) { if (entry.Title == "TrainingFeature") { var currentvalue = entry.Input; currentvalue = currentvalue.replace(/[/g, '<').replace(/]/g, '>').replace(/ /g, ' '); console.log("currentvalue", currentvalue); document.getElementById("functionalityArticle").innerHTML = currentvalue; console.log("entry", entry); } }) console.log("functionalityArticle run");

};

function fixIMG() {

var getArticleDiv = document.getElementById("functionalityArticle");
var getImages = getArticleDiv.getElementsByTagName("img");

for (var i = 0; i < getImages.length; i++) {
    getImages[i].setAttribute("class", "displayedIMG");
    getImages[i].removeAttribute("data-updatedsrc", "");
    getImages[i].removeAttribute("data-themekey", "");
    getImages[i].removeAttribute("data-themingid", "");
    var oldSRC = getImages[i].getAttribute("src");
    var newSRC = oldSRC.replace("https://company.sharepoint.com/sites/CompanyPortal/Pages/%22", "");
    newSRC = newSRC.replace("%22", "");
    getImages[i].setAttribute("src", newSRC);

}

};