How can see local images (put in assets folder)? - enyo

Question

I can't manage to see my assets pictures in this ChessBoard view, though the navigator console doesn't show me any error :
enyo.kind({
name: "PositionView",
published: {
fen: "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1",
cellsize: 32,
color: "#CCC"
},
fit: true,
components: [
{
name: "canvas",
kind: "enyo.Canvas",
attributes: {width: 10, height: 10}
}
],
create: function() {
this.inherited(arguments);
},
rendered:function(){
this.inherited(arguments);
this.computeCellSize();
this.drawGrid();
this.drawPieces();
this.$.canvas.update();
},
drawGrid: function() {
for (var line=0; line < 8; line++){
for (var col=0; col < 8; col++){
var compName = "abcdefgh"[col] + (8-line);
var bgcolor = ((line+col)%2 == 0) ? "#CF3" : "#630";
this.$.canvas.createComponent({
kind: "enyo.canvas.Rectangle",
bounds:{t:(line*this.cellsize), l:(col*this.cellsize), w:this.cellsize, h:this.cellsize},
color:bgcolor,
name: compName
});
}
}
},
drawPieces: function(){
var x = 3*this.cellsize;
var y = 4*this.cellsize;
this.$.canvas.createComponent({
kind: "enyo.canvas.Image",
bounds:{t:y, l:x, w:this.cellsize, h:this.cellsize},
src: "assets/wn.svg"
});
},
computeCellSize: function(){
var screenWidth = enyo.dom.getWindowWidth();
var screenHeight = enyo.dom.getWindowHeight();
var minSize = screenWidth < screenHeight ? screenWidth : screenHeight;
this.cellsize = Math.floor(minSize * 1.0 / 8);
this.$.canvas.setAttribute('width', 8*this.cellsize);
this.$.canvas.setAttribute('height', 8*this.cellsize);
}
});
As you should have noticed, I am making grid cells dynamically (this works well) with the method drawGrid(), but the method drawPieces() doesn't seems to work, as I can't see the picture.
Apologizing for not using JsFiddle, it is because I don't know how to adapt my project so that it can fit in it.

Answer 1

It may be that the image tag is not loading in time to be rendered. You might want to try delaying the call to update the canvas for a short time period. I modified the fiddle previously posted and included an SVG image. It doesn't render the first time for me, but when re-run it will render because it's in the browser cache:
http://jsfiddle.net/RoySutton/cxx57780/1
I wrapped your code above in the following to get it going on jsFiddle:
enyo.ready(function() {
...
new enyo.Application({view: "PositionView"});
});
My previous thought about the width/height of the SVG doesn't seem to be correct so I have removed it from this answer.