When you convert DOC to HTML, images do not appear in the correct place

Aspose.Words Product Family
,
1

Hi there!

If you convert the following DOCX file to HTML, some tags contain the wrong image reference.

This problem occurs in v24.2 and v23.6. Does not occur in v22.9.

Sample file:
imagesInTable.docx (375.2 KB)
The original file was a doc file but I had to convert it to a DOCX file so I could upload it.

It’s a bit difficult to explain the problem without a visual aid, but the issue is that many of the images are not rendered in the correct place. For example, if you take a look at the last two image tags in the “actual” HTML, image-11 and image-1 appear. However image-11 corresponds to the image of a number 5 (if you look at the original doc file) and should instead be image-22.

Below is the expected and actual HTML produced.

Expected:

2514Ă—152 28.5 KB

Actual:

2502Ă—142 27.6 KB

Expected:

<html>
<body>
<div style="font-family:Calibri; font-size:11pt">
    <div>
        <p style="margin-top:0pt; margin-bottom:0pt">
            <span> </span>
        </p>
        <table cellspacing="0" cellpadding="0" style="width:763.7pt; margin-left:2.25pt; border:0.75pt solid #000000; border-collapse:collapse">
            <thead>
            <tr>
                <td colspan="3" style="width:757.15pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; background-color:#666699">
                    <h2 style="margin-top:4pt; margin-bottom:4pt; text-align:center; font-size:12pt">
                        <a name="_Ref169936512"/>
                        <a name="_Ref169936518"/>
                        <a name="_Toc209026281"/>
                        <a name="_Toc209166046"/>
                        <a name="_Toc83895629">
                            <span style="color:#ffffff">Module </span>
                        </a>
                    </h2>
                </td>
            </tr>
            <tr>
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; background-color:#c0c0c0">
                    <p style="margin-top:0pt; margin-bottom:0pt; text-align:center; font-size:11pt">
                        <span style="font-weight:bold">#</span>
                    </p>
                </td>
                <td style="width:220.95pt; border-style:solid; border-width:0.75pt; padding:2.52pt; background-color:#c0c0c0">
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
                        <span style="font-weight:bold">Column title</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; background-color:#c0c0c0">
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
                        <span style="font-weight:bold">Column title</span>
                    </p>
                </td>
            </tr>
            </thead>
            <tbody>
            <tr style="height:12.1pt">
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:4pt; font-size:11pt">
                        <span>1</span>
                    </p>
                </td>
                <td style="width:220.95pt; border-style:solid; border-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; font-size:11pt">
                        <span style="font-weight:bold">Some instructions…</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; page-break-after:avoid; font-size:11pt">
                        <img src="images/imagesInTable/image-1.jpeg" width="369" height="246" alt="Free Landscape Agriculture photo and picture"/>
                        <span>    </span>
                        <img src="images/imagesInTable/image-2.jpeg" width="297" height="198" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                </td>
            </tr>
            <tr style="height:12.1pt">
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:4pt; font-size:11pt">
                        <span style="font-weight:bold"> </span>
                    </p>
                </td>
                <td style="width:220.95pt; border-style:solid; border-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; font-size:11pt">
                        <span style="font-weight:bold">Some instructions…</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:6pt; font-size:11pt">
                        <img src="images/imagesInTable/image-3.jpeg" width="456" height="304" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                </td>
            </tr>
            <tr style="height:12.1pt">
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-left:18pt; margin-bottom:4pt; font-size:11pt">
                        <span style="font-weight:bold"> </span>
                    </p>
                </td>
                <td style="width:220.95pt; border-style:solid; border-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; font-size:11pt">
                        <span style="font-weight:bold">Some instructions…</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:6pt; font-size:11pt">
                        <img src="images/imagesInTable/image-4.jpeg" width="387" height="320" alt="Free Landscape Agriculture photo and picture"/>
                        <span style="font-weight:bold">                </span>
                        <img src="images/imagesInTable/image-5.jpeg" width="166" height="245" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                </td>
            </tr>
            <tr style="height:12.1pt">
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-left:18pt; margin-bottom:4pt; font-size:11pt">
                        <span style="font-weight:bold"> </span>
                    </p>
                </td>
                <td style="width:220.95pt; border-style:solid; border-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; font-size:11pt">
                        <span style="font-weight:bold">Some instructions…</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:6pt; font-size:11pt">
                        <img src="images/imagesInTable/image-6.jpeg" width="371" height="247" alt="Free Landscape Agriculture photo and picture"/>
                        <span>      </span>
                        <img src="images/imagesInTable/image-7.jpeg" width="272" height="306" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                </td>
            </tr>
            <tr style="height:12.1pt">
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-left:18pt; margin-bottom:4pt; font-size:11pt">
                        <span style="font-weight:bold"> </span>
                    </p>
                </td>
                <td style="width:220.95pt; border-style:solid; border-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; font-size:11pt">
                        <span style="font-weight:bold">Some instructions…</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:6pt; font-size:11pt">
                        <img src="images/imagesInTable/image-8.jpeg" width="151" height="261" alt="Free Landscape Agriculture photo and picture"/>
                        <span>          </span>
                    </p>
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
                        <span> </span>
                    </p>
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
<span style="height:0pt; display:block; position:absolute; z-index:0">
<img src="images/imagesInTable/image-15.png" width="36" height="36" alt="" style="margin-top:99.5pt; margin-left:48.6pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:2">
<img src="images/imagesInTable/image-14.png" width="36" height="36" alt="" style="margin-top:131.95pt; margin-left:233.9pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:1">
<img src="images/imagesInTable/image-13.png" width="36" height="36" alt="" style="margin-top:156.55pt; margin-left:191.95pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:3">
<img src="images/imagesInTable/image-12.png" width="36" height="36" alt="" style="margin-top:164.2pt; margin-left:368.3pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:4">
<img src="images/imagesInTable/image-11.png" width="36" height="36" alt="" style="margin-top:191.2pt; margin-left:377.3pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:5">
<img src="images/imagesInTable/image-10.png" width="95" height="20" alt="" style="margin-top:181.7pt; margin-left:306.8pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:6">
<img src="images/imagesInTable/image-9.png" width="86" height="10" alt="" style="margin-top:203.35pt; margin-left:317.95pt; position:absolute"/>
</span>
                        <img src="images/imagesInTable/image-16.jpeg" width="613" height="408" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                </td>
            </tr>
            <tr style="height:12.1pt">
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-left:18pt; margin-bottom:4pt; font-size:11pt">
                        <span style="font-weight:bold"> </span>
                    </p>
                </td>
                <td style="width:220.95pt; border-style:solid; border-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
                        <span style="font-weight:bold">Some instructions…</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:6pt; font-size:11pt">
                        <img src="images/imagesInTable/image-17.jpeg" width="478" height="194" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
                        <span> </span>
                    </p>
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
<span style="height:0pt; display:block; position:absolute; z-index:7">
<img src="images/imagesInTable/image-18.png" width="116" height="12" alt="" style="margin-top:191.15pt; margin-left:233.3pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:8">
<img src="images/imagesInTable/image-18.png" width="116" height="12" alt="" style="margin-top:207.5pt; margin-left:233.3pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:9">
<img src="images/imagesInTable/image-18.png" width="116" height="12" alt="" style="margin-top:279.5pt; margin-left:233.3pt; position:absolute"/>
</span>
                        <img src="images/imagesInTable/image-19.jpeg" width="443" height="396" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                </td>
            </tr>
            <tr style="height:12.1pt">
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-left:18pt; margin-bottom:4pt; font-size:11pt">
                        <span style="font-weight:bold"> </span>
                    </p>
                </td>
                <td style="width:220.95pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
                        <span style="font-weight:bold">Some instructions…</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; padding:2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:6pt; font-size:11pt">
<span style="height:0pt; display:block; position:absolute; z-index:10">
<img src="images/imagesInTable/image-20.png" width="96" height="15" alt="" style="margin-top:92.7pt; margin-left:-0.55pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:11">
<img src="images/imagesInTable/image-20.png" width="96" height="15" alt="" style="margin-top:20.2pt; margin-left:336.65pt; position:absolute"/>
</span>
                        <img src="images/imagesInTable/image-21.jpeg" width="571" height="230" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
                        <span> </span>
                    </p>
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
<span style="height:0pt; display:block; position:absolute; z-index:12">
<img src="images/imagesInTable/image-22.png" width="39" height="13" alt="" style="margin-top:147.32pt; margin-left:99.97pt; position:absolute"/>
</span>
                        <img src="images/imagesInTable/image-23.jpeg" width="571" height="310" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                </td>
            </tr>
            </tbody>
        </table>
        <p style="margin-top:0pt; margin-bottom:0pt">
            <span> </span>
        </p>
    </div>
</div>
</body>
</html>

Actual:

<html>
<body>
<div style="font-family:Calibri; font-size:11pt">
    <div>
        <p style="margin-top:0pt; margin-bottom:0pt">
            <span> </span>
        </p>
        <table cellspacing="0" cellpadding="0" style="width:763.7pt; margin-left:2.25pt; border:0.75pt solid #000000; border-collapse:collapse">
            <thead>
            <tr>
                <td colspan="3" style="width:757.15pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; background-color:#666699">
                    <h2 style="margin-top:4pt; margin-bottom:4pt; text-align:center; font-size:12pt">
                        <a name="_Ref169936512"/>
                        <a name="_Ref169936518"/>
                        <a name="_Toc209026281"/>
                        <a name="_Toc209166046"/>
                        <a name="_Toc83895629">
                            <span style="color:#ffffff">Module </span>
                        </a>
                    </h2>
                </td>
            </tr>
            <tr>
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; background-color:#c0c0c0">
                    <p style="margin-top:0pt; margin-bottom:0pt; text-align:center; font-size:11pt">
                        <span style="font-weight:bold">#</span>
                    </p>
                </td>
                <td style="width:220.95pt; border-style:solid; border-width:0.75pt; padding:2.9pt 2.52pt; background-color:#c0c0c0">
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
                        <span style="font-weight:bold">Column title</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; background-color:#c0c0c0">
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
                        <span style="font-weight:bold">Column title</span>
                    </p>
                </td>
            </tr>
            </thead>
            <tbody>
            <tr style="height:12.1pt">
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:4pt; font-size:11pt">
                        <span>1</span>
                    </p>
                </td>
                <td style="width:220.95pt; border-style:solid; border-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; font-size:11pt">
                        <span style="font-weight:bold">Some instructions…</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; page-break-after:avoid; font-size:11pt">
                        <img src="images/imagesInTable/image-1.jpeg" width="369" height="246" alt="Free Landscape Agriculture photo and picture"/>
                        <span>    </span>
                        <img src="images/imagesInTable/image-1.jpeg" width="297" height="198" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                </td>
            </tr>
            <tr style="height:12.1pt">
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:4pt; font-size:11pt">
                        <span style="font-weight:bold"> </span>
                    </p>
                </td>
                <td style="width:220.95pt; border-style:solid; border-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; font-size:11pt">
                        <span style="font-weight:bold">Some instructions…</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:6pt; font-size:11pt">
                        <img src="images/imagesInTable/image-1.jpeg" width="456" height="304" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                </td>
            </tr>
            <tr style="height:12.1pt">
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-left:18pt; margin-bottom:4pt; font-size:11pt">
                        <span style="font-weight:bold"> </span>
                    </p>
                </td>
                <td style="width:220.95pt; border-style:solid; border-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; font-size:11pt">
                        <span style="font-weight:bold">Some instructions…</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:6pt; font-size:11pt">
                        <img src="images/imagesInTable/image-1.jpeg" width="387" height="320" alt="Free Landscape Agriculture photo and picture"/>
                        <span style="font-weight:bold">                </span>
                        <img src="images/imagesInTable/image-1.jpeg" width="166" height="245" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                </td>
            </tr>
            <tr style="height:12.1pt">
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-left:18pt; margin-bottom:4pt; font-size:11pt">
                        <span style="font-weight:bold"> </span>
                    </p>
                </td>
                <td style="width:220.95pt; border-style:solid; border-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; font-size:11pt">
                        <span style="font-weight:bold">Some instructions…</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:6pt; font-size:11pt">
                        <img src="images/imagesInTable/image-1.jpeg" width="371" height="247" alt="Free Landscape Agriculture photo and picture"/>
                        <span>      </span>
                        <img src="images/imagesInTable/image-1.jpeg" width="272" height="306" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                </td>
            </tr>
            <tr style="height:12.1pt">
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-left:18pt; margin-bottom:4pt; font-size:11pt">
                        <span style="font-weight:bold"> </span>
                    </p>
                </td>
                <td style="width:220.95pt; border-style:solid; border-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; text-align:justify; font-size:11pt">
                        <span style="font-weight:bold">Some instructions…</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:6pt; font-size:11pt">
                        <img src="images/imagesInTable/image-1.jpeg" width="151" height="261" alt="Free Landscape Agriculture photo and picture"/>
                        <span>          </span>
                    </p>
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
                        <span> </span>
                    </p>
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
<span style="height:0pt; display:block; position:absolute; z-index:0">
<img src="images/imagesInTable/image-8.png" width="36" height="36" alt="" style="margin-top:99.5pt; margin-left:48.6pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:2">
<img src="images/imagesInTable/image-7.png" width="36" height="36" alt="" style="margin-top:131.95pt; margin-left:233.9pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:1">
<img src="images/imagesInTable/image-6.png" width="36" height="36" alt="" style="margin-top:156.55pt; margin-left:191.95pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:3">
<img src="images/imagesInTable/image-5.png" width="36" height="36" alt="" style="margin-top:164.2pt; margin-left:368.3pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:4">
<img src="images/imagesInTable/image-4.png" width="36" height="36" alt="" style="margin-top:191.2pt; margin-left:377.3pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:5">
<img src="images/imagesInTable/image-3.png" width="95" height="20" alt="" style="margin-top:181.7pt; margin-left:306.8pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:6">
<img src="images/imagesInTable/image-2.png" width="86" height="10" alt="" style="margin-top:203.35pt; margin-left:317.95pt; position:absolute"/>
</span>
                        <img src="images/imagesInTable/image-1.jpeg" width="613" height="408" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                </td>
            </tr>
            <tr style="height:12.1pt">
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-left:18pt; margin-bottom:4pt; font-size:11pt">
                        <span style="font-weight:bold"> </span>
                    </p>
                </td>
                <td style="width:220.95pt; border-style:solid; border-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
                        <span style="font-weight:bold">Some instructions…</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; border-bottom-style:solid; border-bottom-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:6pt; font-size:11pt">
                        <img src="images/imagesInTable/image-1.jpeg" width="478" height="194" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
                        <span> </span>
                    </p>
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
<span style="height:0pt; display:block; position:absolute; z-index:7">
<img src="images/imagesInTable/image-9.png" width="116" height="12" alt="" style="margin-top:191.15pt; margin-left:233.3pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:8">
<img src="images/imagesInTable/image-9.png" width="116" height="12" alt="" style="margin-top:207.5pt; margin-left:233.3pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:9">
<img src="images/imagesInTable/image-9.png" width="116" height="12" alt="" style="margin-top:279.5pt; margin-left:233.3pt; position:absolute"/>
</span>
                        <img src="images/imagesInTable/image-1.jpeg" width="443" height="396" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                </td>
            </tr>
            <tr style="height:12.1pt">
                <td style="width:26.2pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-left:18pt; margin-bottom:4pt; font-size:11pt">
                        <span style="font-weight:bold"> </span>
                    </p>
                </td>
                <td style="width:220.95pt; border-top-style:solid; border-top-width:0.75pt; border-right-style:solid; border-right-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
                        <span style="font-weight:bold">Some instructions…</span>
                    </p>
                </td>
                <td style="width:498.4pt; border-top-style:solid; border-top-width:0.75pt; border-left-style:solid; border-left-width:0.75pt; padding:2.9pt 2.52pt; vertical-align:top">
                    <p style="margin-top:0pt; margin-bottom:6pt; font-size:11pt">
<span style="height:0pt; display:block; position:absolute; z-index:10">
<img src="images/imagesInTable/image-10.png" width="96" height="15" alt="" style="margin-top:92.7pt; margin-left:-0.55pt; position:absolute"/>
</span>
                        <span style="height:0pt; display:block; position:absolute; z-index:11">
<img src="images/imagesInTable/image-10.png" width="96" height="15" alt="" style="margin-top:20.2pt; margin-left:336.65pt; position:absolute"/>
</span>
                        <img src="images/imagesInTable/image-1.jpeg" width="571" height="230" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
                        <span> </span>
                    </p>
                    <p style="margin-top:0pt; margin-bottom:0pt; font-size:11pt">
<span style="height:0pt; display:block; position:absolute; z-index:12">
<img src="images/imagesInTable/image-11.png" width="39" height="13" alt="" style="margin-top:147.32pt; margin-left:99.97pt; position:absolute"/>
</span>
                        <img src="images/imagesInTable/image-1.jpeg" width="571" height="310" alt="Free Landscape Agriculture photo and picture"/>
                    </p>
                </td>
            </tr>
            </tbody>
        </table>
        <p style="margin-top:0pt; margin-bottom:0pt">
            <span> </span>
        </p>
    </div>
</div>
</body>
</html>
2

@digi0 Unfortunately, I cannot reproduce the problem using the following simple code and the latest 24.3 version of Aspose.Words:

Document doc = new Document("C:\\Temp\\in.docx");
HtmlSaveOptions opt = new HtmlSaveOptions();
opt.setPrettyFormat(true);
doc.save("C:\\Temp\\out.html", opt);

Here is the produced output. As I can see all images are exported correctly: out.zip (1020.5 KB)

3

Thanks for looking into this.

I tested the conversion using the code snippet you shared and you are correct, it does work as expected. :slight_smile:

I have looked at our codebase and have figured out what is causing the images to not get rendered correctly on our end. We have implemented a IImageSavingCallback class. Say its called ImageSavingCallback. This call uses a counter in its imageSaving() implementation.

So before saving the document, among other settings, we set these options:

ImageSavingCallback imageSavingCallback = new ImageSavingCallback();
opt.setImageSavingCallback(imageSavingCallback);
opt.setScaleImageToShapeSize(false);

What is happening when I debug our code is imageSaving() gets called 11 times, then not again.

Can you confirm if there is a bug on Aspose’s end that causes the images to saved in the wrong order when we set the setScaleImageToShapeSize property to false and use a custom ImageSavingCallback class? That is what I observe to be happening.

Something has obviously changed between versions 22.9 and 24.2. So wondering if the change was intentional (if so we might have to modify our code)? If not are you able to change the behaviour or suggest a property we can use to ensure the ordering is linear?

Thanks!

4

@digi0 The behavior is expected. Your document actually has only one image and several shapes. When you disable ScaleImageToShapeSize option, the same image is reused in the output HTML. When ScaleImageToShapeSize option is enabled each image shape is rendered as unique images (since they are scaled) and there are more images.

5

Right I see. Can you think of a reason why there is a difference between the two versions I mentioned though?

6

@digi0 It is hard to say now, since a lot of fixes have been made since 22.9 version. But it looks like there were improvements have been made in reusing duplicated images upon exporting document to HTML.

Visually exported HTML documents look the same with and without ScaleImageToShapeSize option.

7

Thank you! I’ll see if we can change either the ScaleImageToShapeSize property usage or change our IImageSavingCallback implementation.

1 Like