How to view a diagrams has image clipart with mxGraph?

I used I tried to view diagrams from /mxgraph-master/javascript/examples/grapheditor/www/viewer.html. My xml:

<mxGraphModel dx="1361" dy="839" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" background="#ffffff">
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;jettySize=auto;orthogonalLoop=1;" edge="1" parent="1" source="2" target="3">
      <mxGeometry relative="1" as="geometry"/>
    <mxCell id="2" value="" style="image;html=1;labelBackgroundColor=#ffffff;image=stencils/clipart/Earth_globe_128x128.png" vertex="1" parent="1">
      <mxGeometry x="200" y="250" width="80" height="80" as="geometry"/>
    <mxCell id="5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;jettySize=auto;orthogonalLoop=1;" edge="1" parent="1" source="3">
      <mxGeometry relative="1" as="geometry">
        <mxPoint x="690" y="300" as="targetPoint"/>
    <mxCell id="3" value="" style="image;html=1;labelBackgroundColor=#ffffff;image=stencils/clipart/Virus_128x128.png" vertex="1" parent="1">
      <mxGeometry x="460" y="260" width="80" height="80" as="geometry"/>
    <mxCell id="6" value="" style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="700" y="270" width="120" height="60" as="geometry"/>

My xml had image cliparts. When I click show button, The image cliparts was changed into square.
I tried debug with viewer.html and index.html. I found a litle reason:

  • viewer.html: in func mxShape.prototype.paint (mxShape.js), in line 891, this.paintVertexShape(c, x, y, w, h) is function of mxShape.js.

  • Index.html: in line 891, this.paintVertexShape(c, x, y, w, h) is function of mxImageShape.js.

Because when I used viewer.html that not showed image, it changed to square.
Help me, please! Thanks!