mxGraph shows grid, but does not show images
<p>I'm using the <a href="https://jgraph.github.io/mxgraph/docs/manual.html" rel="nofollow">mxGraph</a> to develop a drawable area in a web page.</p>

<p>This is a legacy code and I'm trying to understand it, because the area is not showing any images besides a grid.</p>

<p>Here is my javascript code to show a simple diagram</p>

<pre><code>//define a window to show the image and put a grid as background
container.style.background = 'url("js/src/images/grid.gif")';
//some other definitions here

var model = new mxGraphModel();
var graph = new mxGraph(container, model);

var id = _GET("id");
mxUtils.post("../Diagram", 
"action=get&amp;id="+id, 
function(req)
{
    var node = req.getDocumentElement();
    var dec = new mxCodec(node.ownerDocument);
    dec.decode(node, graph.getModel());
}, 
function(error){
    console.log("Error in the design area");
    console.log(error);
});
</code></pre>

<p>The <code>../Diagram</code> is a servlet Java that you can see below:</p>

<pre><code>try {
    BufferedReader buffRead = new BufferedReader(new FileReader("/home/glassfish/mySite/Repository/"+getId()+"/"+getName()+".txt")); 
    String line = ""; 
    while (true) { 
        if (line != null) { 
            file = line; 
        } else {
            break; 
        }
        line = buffRead.readLine(); 
    } 
    buffRead.close();
} catch(Exception e) {
    System.out.println("File not found");
}
return file;
</code></pre>

<p>The returned XML (file) is like below:</p>

<pre><code>&lt;root&gt;
    &lt;mxCell id="0"/&gt;
    &lt;mxCell id="1" parent="0"/&gt;
    &lt;mxCell id="2" parent="1" style="shape=ellipse;fillColor=#33CCFF" value="Objective" vertex="1"&gt;
        &lt;mxGeometry as="geometry" height="40" width="100" x="262" y="90"/&gt;
    &lt;/mxCell&gt;
&lt;/root&gt;
</code></pre>

<p>However, the result in the screen is always the grid only</p>

<p><a href="https://i.stack.imgur.com/Qv3Uj.png" rel="nofollow"><img src="https://i.stack.imgur.com/Qv3Uj.png" alt="grid"></a></p>

<p>When I debug the line <code>dec.decode(node, graph.getModel());</code> to see the <code>node</code> value I got a XML Object that contains the info returned by Java.</p>

<p>In Chrome I don't receive any message in the console, but when I test it in Firefox I receive an warning saying that I have a "XML parsing error in the file graph.properties", but this file is not a XML (actually, I don't know what is this file). I'm also pasting the file here</p>

<p>graph.properties</p>

<pre><code>alreadyConnected=Nodes already connected
containsValidationErrors=Contains validation errors
updatingDocument=Updating Document. Please wait...
updatingSelection=Updating Selection. Please wait...
collapse-expand=Collapse/Expand
doubleClickOrientation=Doubleclick to change orientation
close=Close
error=Error
done=Done
cancel=Cancel
ok=OK
</code></pre>

<p><em>UPDATE</em></p>

<p>I still have not solved the problem, but I got a new evidence. </p>

<p>When I debug the <code>dec.decode(node, graph.getModel());</code> line, I have two properties for the <code>dec</code> variable. A XMLDocument and also a empty array. I think that the problem could be in the encoding part, but I not found any tip in the <a href="https://jgraph.github.io/mxgraph/docs/js-api/files/io/mxCodec-js.html" rel="nofollow">page about mxCodec</a>.</p>

<p><a href="https://i.stack.imgur.com/dWmaZ.png" rel="nofollow"><img src="https://i.stack.imgur.com/dWmaZ.png" alt="image of debug"></a></p>