Extract inline image from page

[Nevinia210]

Hello,
is it possible to extract inline image url from page?

Scenario:
in our pages we are using inline images, we need to recreate these images on pages, but im not sure if there is a way to find out what images are used in webparts, code bellow is whole snipped from page

<div tabindex="-1" data-cke-widget-wrapper="1" data-cke-filter="off"
    class="cke_widget_wrapper cke_widget_block cke_widget_inlineimage cke_widget_wrapper_webPartInRteInlineImage cke_widget_wrapper_webPartInRteAlignCenter cke_widget_wrapper_webPartInRte"
    data-cke-display-name="div" data-cke-widget-id="1" role="region"
    aria-label="Inline image in RTE. Use Alt + F11 to go to toolbar. Use Alt + P to open the property pane.">
    <div data-webpart-id="image" class="webPartInRte webPartInRteAlignCenter webPartInRteInlineImage cke_widget_element"
        data-cke-widget-data="%7B%22classes%22%3A%7B%22webPartInRteInlineImage%22%3A1%2C%22webPartInRteAlignCenter%22%3A1%2C%22webPartInRte%22%3A1%7D%7D"
        data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="inlineimage"
        data-instance-id="dataInstanceId" title="">
    </div>
</div>

Thanks for your help in advance

[jansenbe]

@Nevinia210 : when you load the page in question as an IPage you'll see that the content of a text part having inline images contains references to 'hidden' image web parts (e.g. data-instance-id="8a375288-72a7-4784-9704-dd45c478d37c") from below sample. If you then check the IPage controls you can locate the web part and get it's properties via the PropertiesJson property, which tells you the image via it's ids.

If you cast the control to IPageWebPart using the HtmlPropertiesData property will also give you the needed URL:

<p>Before inline images</p>
<div tabindex="-1" data-cke-widget-wrapper="1" data-cke-filter="off"
    class="cke_widget_wrapper cke_widget_block cke_widget_inlineimage cke_widget_wrapper_webPartInRteInlineImage cke_widget_wrapper_webPartInRteAlignCenter cke_widget_wrapper_webPartInRte"
    data-cke-display-name="div" data-cke-widget-id="0" role="region"
    aria-label="Inline image in RTE. Use Alt + F11 to go to toolbar. Use Alt + P to open the property pane.">
    <div data-webpart-id="image" class="webPartInRte webPartInRteAlignCenter webPartInRteInlineImage cke_widget_element"
        data-cke-widget-data="%7B%22classes%22%3A%7B%22webPartInRteInlineImage%22%3A1%2C%22webPartInRteAlignCenter%22%3A1%2C%22webPartInRte%22%3A1%7D%7D"
        data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="inlineimage"
        data-instance-id="8a375288-72a7-4784-9704-dd45c478d37c" title=""></div>
</div>
<p>Post image</p>
<div tabindex="-1" data-cke-widget-wrapper="1" data-cke-filter="off"
    class="cke_widget_wrapper cke_widget_block cke_widget_inlineimage cke_widget_wrapper_webPartInRteInlineImage cke_widget_wrapper_webPartInRteAlignLeft cke_widget_wrapper_webPartInRte"
    data-cke-display-name="div" data-cke-widget-id="0" role="region"
    aria-label="Inline image in RTE. Use Alt + F11 to go to toolbar. Use Alt + P to open the property pane.">
    <div data-webpart-id="image" class="webPartInRte webPartInRteAlignLeft webPartInRteInlineImage cke_widget_element"
        data-cke-widget-data="%7B%22classes%22%3A%7B%22webPartInRteInlineImage%22%3A1%2C%22webPartInRteAlignLeft%22%3A1%2C%22webPartInRte%22%3A1%7D%7D"
        data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="inlineimage"
        data-instance-id="1fa43565-55ed-4737-a816-ae149a015cbb" title=""></div>
</div>
<p>Post image</p>
<div tabindex="-1" data-cke-widget-wrapper="1" data-cke-filter="off"
    class="cke_widget_wrapper cke_widget_block cke_widget_inlineimage cke_widget_wrapper_webPartInRteInlineImage cke_widget_wrapper_webPartInRteAlignRight cke_widget_wrapper_webPartInRte"
    data-cke-display-name="div" data-cke-widget-id="0" role="region"
    aria-label="Inline image in RTE. Use Alt + F11 to go to toolbar. Use Alt + P to open the property pane.">
    <div data-webpart-id="image" class="webPartInRte webPartInRteAlignRight webPartInRteInlineImage cke_widget_element"
        data-cke-widget-data="%7B%22classes%22%3A%7B%22webPartInRteInlineImage%22%3A1%2C%22webPartInRteAlignRight%22%3A1%2C%22webPartInRte%22%3A1%7D%7D"
        data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="inlineimage"
        data-instance-id="beefd272-c56c-4961-bdfc-ca81c1b60fe1" title=""></div>
</div>
<p>Post image</p>

[Nevinia210]

Excelent! thank you a lot