Images imported in SharePoint page's text webpart disappear when switched to edit mode

Question

I have migrated content from the customer's CMS to SharePoint online pages. I'm importing html-data to text webpart and everything works quite nicely. But when I start editing page all images inside the text area will disappear. I have checked the html and it seems valid.

HTML data is imported to page with PnP Powershell like this:

$newString = "Some html here <img src="https://mymigrationsiteurl/sites/migration/images/image1.jpg" /> and more html here";

Set-PnPPageTextPart -Page MyTestPage -InstanceId $componentId -Text $newString;

All other markups seems to be working just fine. The problem is only with images (and yes, the image urls are valid and privileges checked).

Is this just a thing that should not be done and not supported at all?

Found this same subject from internet but none of the answers helped me.

Answer 1

OK, I have similar issues with SharePoint, but What i found was the following.

1. Image URL Handling: SharePoint Online sometimes has issues with external image URLs. Ensure that the images are stored within the same SharePoint site collection to avoid cross-domain issues.
2. Permissions: Double-check that the images have the correct permissions. Even if the URLs are valid, the images might not be visible if the permissions are not set correctly. Make sure the images are published and accessible to all users who need to view the page.
3. HTML Sanitization: SharePoint Online might be sanitizing the HTML content when you switch to edit mode, which can strip out certain tags, including <img>. This is a security feature to prevent malicious code.
4. Alternative Methods: Instead of embedding images directly in the HTML, consider using the Image web part or the Embed web part to add images. These methods are more reliable and supported by SharePoint Online.
5. PnP PowerShell: Ensure that the PnP PowerShell command is correctly formatting the HTML content. Sometimes, special characters or encoding issues can cause problems.

I found this little tip I think might help.

Here's a revised approach using the Image web part:

# Add an image web part to the page
Add-PnPClientSideWebPart -Page "MyTestPage" -DefaultWebPartType Image -WebPartProperties @{
    "ImageUrl" = "https://mymigrationsiteurl/sites/migration/images/image1.jpg"
    "AltText" = "Description of the image"
}

This method ensures that the image is added using a supported web part, which should prevent it from disappearing when editing the page.

I hope something in here helps.