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

%3CLINGO-SUB%20id%3D%22lingo-sub-1182185%22%20slang%3D%22en-US%22%3ESharepoint%20putting%20extra%20%22src%22%20information%20in%20%3CIMG%20%2F%3E%20tags%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1182185%22%20slang%3D%22en-US%22%3E%3CP%3EHello%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20trying%20to%20find%20a%20resolution%20to%20a%20problem%20i%20have%20never%20came%20across%20previously.%3C%2FP%3E%3CP%3EI%20have%20created%20a%20quill%20rich%20text%20editor%20where%20i%20intend%20to%20put%20text%20and%20images%20that%20i%20can%20store%20as%20html%20in%20sharepoint%20lists%20in%20order%20to%20load%20it%20on%20a%20custom%20landing%20page%20instead%20of%20updating%20the%20html%20code%20itself%20every%20time%20there%20is%20new%20content.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhile%20storing%20formatted%20text%20works%20perfectly%2C%20i%20am%20facing%20an%20issue%20whereas%20%3CIMG%20%2F%3E%20tags%20get%20altered%20by%20sharepoint%20by%20adding%20an%20extra%20URL%20in%20them%20before%20the%20actual%20URL%20of%20the%20image.%20This%20makes%20the%20%3CIMG%20src%3D%22%26quot%3B%26quot%3B%22%20property%3D%22%22%20incorrect%3D%22%22%20and%3D%22%22%20the%3D%22%22%20image%3D%22%22%20doesnt%3D%22%22%20load.%3D%22%22%20i%3D%22%22%20tried%3D%22%22%20with%3D%22%22%20reading%3D%22%22%20the%3D%22%22%20element%3D%22%22%20from%3D%22%22%20the%3D%22%22%20dom%3D%22%22%20and%3D%22%22%20altering%3D%22%22%20the%3D%22%22%20property%3D%22%22%20with%3D%22%22%20javacript.replace%3D%22%22%20%2F%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eexample%3A%26nbsp%3B%3C%2FP%3E%3CP%3EURL%20of%20the%20image%20i%20upload%20as%20html%20code%20into%20a%20list%3A%3C%2FP%3E%3CP%3E%3C%2FP%3E%3CDIV%20class%3D%22%26quot%3B%26quot%3B%22%3E%3CP%3E%3CIMG%20class%3D%22%26quot%3Bclass%26quot%3B%22%20%2F%3E%3CU%3Esrc%3D%22%3CA%20href%3D%22https%3A%2F%2Fcompany.sharepoint.com%2Fsites%2FPortalName%2FDocumentLibraryname%2Fimage.jpg%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcompany.sharepoint.com%2Fsites%2FPortalName%2FDocumentLibraryname%2Fimage.jpg%3C%2FA%3E%22%3C%2FU%3E%20data-themekey%3D%22%22%26gt%3B%3C%2FP%3E%3C%2FDIV%3E%3CP%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThen%20what%20comes%20out%20when%20rendering%20the%20DOM%20is%3A%3C%2FP%3E%3CP%3E%3C%2FP%3E%3CDIV%20class%3D%22%26quot%3B%26quot%3B%22%3E%3CP%3E%3CIMG%20class%3D%22%26quot%3Bclass%26quot%3B%22%20%2F%3E%3CU%3Esrc%3D%22%3CSTRONG%3E%3CA%20href%3D%22https%3A%2F%2Fcompany.sharepoint.com%2Fpages%2F%2522%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcompany.sharepoint.com%2Fpages%2F%2522%3C%2FA%3E%3C%2FSTRONG%3E%3CA%20href%3D%22https%3A%2F%2Fcompany.sharepoint.com%2Fsites%2FPortalName%2FDocumentLibraryname%2Fimage.jpg%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcompany.sharepoint.com%2Fsites%2FPortalName%2FDocumentLibraryname%2Fimage.jpg%3C%2FA%3E%22%3C%2FU%3E%20data-themekey%3D%22%22%26gt%3B%3C%2FP%3E%3C%2FDIV%3E%3CP%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENotice%20the%20addition%20of%20an%20extra%20url%20part%20in%20bold.%20I%20tried%20replacing%20the%20parts%20i%20dont%20need%20in%20%22src%22%20with%20javascript%2C%20and%20even%20though%20console.log-ing%20displays%20the%20corrected%20value%2C%20when%20i%20put%20it%20back%20as%20innerHTML%20to%20its%20place%2C%20the%20wrong%20link%20gets%20added%20back.%20The%20process%20of%20reading%20the%20content%20of%20a%20sharepoint%20list%20item%2C%20putting%20it%20into%20a%20var%20and%20replacing%20stuff%20is%20connected%20to%20an%20onClick%20event%2C%20therefore%20document.ready%20shouldn't%20be%20an%20issue.%26nbsp%3B%3C%2FP%3E%3CP%3EHas%20anyone%20face%20this%20issue%20before%3F%3C%2FP%3E%3CP%3EAny%20help%20would%20be%20much%20appreciated!%3C%2FP%3E%3CP%3EThanks!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1182185%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAPIs%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EIMG%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EJavaScript%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Occasional Visitor

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!

 

 

0 Replies