[BUG] Embedded images referring to _layouts image files don't get correct height and width values

[dgwebb]

Problem Area

[X] Page Transformation: Error during the use of page transformation from PnP PowerShell
[ ] Page Transformation: Error during the use of page transformation from .Net
[ ] Page Transformation: Page is not looking correct after transformation
[ ] Modernization Scanner: something went wrong...

Expected or Desired Behavior

A web part page containing an image embedded in the wiki text page content field is migrated successfully.

Observed Behavior

An error is thrown when assigning the JSON properties of the modern Image web part. The reason is that the ImageWidth and ImageHeight properties in the boilerplate JSON object are not substituted with actual values. (The values are not specified in the source page). This does not happen for all pages, it seems only to fail intermittently.

Steps to Reproduce

Create a page in a classic publishing site with the following page content (the embedded image is just used to show the file type icon of a Word document):

<p>​Read the attached scenarios.</p>
<p>&#160;</p>
<p> 
   <img class="ms-asset-icon ms-rtePosition-4" alt="Centralized Wealth Protection Delivery Channel - Scenarios.docx" 
	src="/sites/Insite2migrated/ServingMembers/ProductsAndServices/Insurance/WealthProtection/_layouts/images/icdocx.png" 
		data-themekey="#"/> 
   <a href="url-to-document"> Centralized Wealth Protection Delivery Channel - Scenarios.docx</a>
</p>

The web part mapping correctly creates a modern Image web part, assigns the boilerplate JSON properties to it, then substitutes the web part properties from the source page. However, the web part properties contain a Width and Height property, which don't match the ImageWidth and ImageHeight placeholders in the JSON boilerplate. The resulting JSON properties look like this:

{
"serverProcessedContent": {
"htmlStrings": {},
"searchablePlainTexts": {
"captionText": ""
},
"imageSources": {
"imageSource": "/sites/insite-serving-members/_layouts/images/icdocx.png"
},
"links": {
"linkUrl": ""
}
},
"dataVersion": "1.9",
"properties": {
"imageSourceType": 2,
"altText": "",
"fileName": "icdocx.png",
"siteId": "662411f2-9590-4d12-8ccc-caa4d7397556",
"webId": "822753b5-1c6d-4518-bb4a-ffba1c4e8880",
"listId": "{ImageListId}",
"uniqueId": "{ImageUniqueId}",
"alignment": "Center",
"imgWidth": {
ImageWidth
},
"imgHeight": {
ImageHeight
},
"fixAspectRatio": false
}
}

Note that there are no "" or {} characters on the imgWidth and imgHeight properties.

Output from the PowerShell script:

[Page Transformation Information] Engine version = 1.11.2.0
[Page Transformation Information] Overwrite = True
[Page Transformation Information] Target Page Name = Centralized-Wealth-Protection-Scenarios.aspx
[Page Transformation Information] Target Page Folder =
[Page Transformation Information] Target Page Folder Overrides Default Folder = False
[Page Transformation Information] Keep Page Specific Permissions = True
[Page Transformation Information] Remove Empty Sections And Columns = True
[Page Transformation Information] Handle Wiki Images And Videos = True
[Page Transformation Information] Add Table List Image As Image Web Part = True
[Page Transformation Information] Keep Page Creation Modification Information = True
[Page Transformation Information] Publish Created Page = True
[Page Transformation Information] Post As News = False
[Page Transformation Information] Disable Page Comments = False
[Page Transformation Information] Skip Url Rewrite = False
[Page Transformation Information] Skip Default Url Rewrite = True
[Page Transformation Information] Url Mapping File = C:\clients\GO\Migration-Dev\Pages\PageDocumentUrlMapping.csv
[Page Transformation Information] Skip Hidden Web Parts = False
[Page Transformation Information] Term Mapping File =
[Page Transformation Information] Skip Term Store Mapping = True
[Page Transformation Information] Skip User Mapping = False
[Page Transformation Information] User Mapping File = C:\clients\GO\Migration-Dev\Pages\UserMapping.csv
[Page Transformation Information] L D A P Connection String =
[Page Transformation Information] Skip Telemetry = False
Debug: [Input Validation] Validation checks complete
Source: System.String Transform(PnP.Framework.Modernization.Publishing.PublishingPageTransformationInformation)
Debug: [SharePoint Connection] Loading client context objects
Source: System.String Transform(PnP.Framework.Modernization.Publishing.PublishingPageTransformationInformation)
Debug: [SharePoint Connection] Loading target client context object
Source: System.String Transform(PnP.Framework.Modernization.Publishing.PublishingPageTransformationInformation)
[User Mapping] Loading User mapping file C:\clients\GO\Migration-Dev\Pages\UserMapping.csv
Debug: [Page Creation] Detect if the page is living inside a folder
Source: System.String Transform(PnP.Framework.Modernization.Publishing.PublishingPageTransformationInformation)
Debug: [Page Creation] Just try to load the page in the fastest possible manner, we only want to see if the page exists or not
Source: System.String Transform(PnP.Framework.Modernization.Publishing.PublishingPageTransformationInformation)
[Page Creation] The page already exists in target location
[Page Creation] Modern page created
[Article page handling] Transforming source page as Article page
[Article page handling] Recognized source page as a Publishing Page - Analyzing web parts and page layouts
[Page Layout Manager] Page uses HowDoI as page layout, mapping that will be used is HowDoI
[URL rewriter] Loading URL mapping file C:\clients\GO\Migration-Dev\Pages\PageDocumentUrlMapping.csv
[Article page handling] Splitting images and videos from wiki text - as modern text web part does not support embedded images and videos
[Set Page Title] Setting the modern page title: Centralized Wealth Protection Scenarios
Debug: [Article page handling] Preparing content transformation
Source: System.String Transform(PnP.Framework.Modernization.Publishing.PublishingPageTransformationInformation)
[Article page handling] Transforming content
[Content Transform] Transforming web parts
[Web Part Mapping] Web Part:'Title' of type 'GO.WebParts.Breadcrumbs' is being transformed
Debug: [Web Part Mapping] Processing selector functions
Source: Void Transform(System.Collections.Generic.List1[PnP.Framework.Modernization.Entities.WebPartEntity]) Debug: [Web Part Mapping] Combining mapping data Source: Void Transform(System.Collections.Generic.List1[PnP.Framework.Modernization.Entities.WebPartEntity])
[Adding Web Parts to Target Page] Using 'custom' modern web part
[Adding Web Parts to Target Page] Added 'Breadcrumb (GO)' Client Side Web Part to target page
[Web Part Mapping] Web Part:'WikiText' of type 'SharePointPnP.Modernization.WikiTextPart' is being transformed
Debug: [Web Part Mapping] Processing selector functions
Source: Void Transform(System.Collections.Generic.List1[PnP.Framework.Modernization.Entities.WebPartEntity]) Debug: [Web Part Mapping] Combining mapping data Source: Void Transform(System.Collections.Generic.List1[PnP.Framework.Modernization.Entities.WebPartEntity])
[Adding Web Parts to Target Page] Added 'Client Side Text Web Part' to target page
[Web Part Mapping] Web Part:'Wiki text' of type 'SharePointPnP.Modernization.WikiTextPart' is being transformed
Debug: [Web Part Mapping] Processing selector functions
Source: Void Transform(System.Collections.Generic.List1[PnP.Framework.Modernization.Entities.WebPartEntity]) Debug: [Web Part Mapping] Combining mapping data Source: Void Transform(System.Collections.Generic.List1[PnP.Framework.Modernization.Entities.WebPartEntity])
[Adding Web Parts to Target Page] Added 'Client Side Text Web Part' to target page
[Web Part Mapping] Web Part:'Image in wiki text' of type 'SharePointPnP.Modernization.WikiImagePart' is being transformed
Debug: [Web Part Mapping] Processing selector functions
Source: Void Transform(System.Collections.Generic.List1[PnP.Framework.Modernization.Entities.WebPartEntity]) Debug: [Web Part Mapping] Combining mapping data Source: Void Transform(System.Collections.Generic.List1[PnP.Framework.Modernization.Entities.WebPartEntity])
[Adding Web Parts to Target Page] Using 'Image' modern web part
Error: [Summary] A critical error occurred - transformation did not complete Error: 'I' is an invalid start of a property name. Expected a '"'. Path: $ | LineNumber: 0 | BytePositionInLine: 473. StackTrace: at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, JsonReaderException ex)
at System.Text.Json.Serialization.JsonConverter1.ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state) at System.Text.Json.JsonSerializer.ReadFromSpan[TValue](ReadOnlySpan1 utf8Json, JsonTypeInfo jsonTypeInfo, Nullable1 actualByteCount) at System.Text.Json.JsonSerializer.ReadFromSpan[TValue](ReadOnlySpan1 json, JsonTypeInfo jsonTypeInfo)
at System.Text.Json.JsonSerializer.Deserialize[TValue](String json, JsonSerializerOptions options)
at PnP.Core.Model.SharePoint.PageWebPart.set_PropertiesJson(String value)
at PnP.Framework.Modernization.Transform.ContentTransformator.Transform(List`1 webParts)
at PnP.Framework.Modernization.Publishing.PublishingPageTransformator.Transform(PublishingPageTransformationInformation publishingPageTransformationInformation)

PnP PowerShell version: 1.12.0