在for循环中将图片附加到画布上无法正常工作

Question

我要附加两个dataurl。但是只有最后一个被附加。我知道这是因为我使用了警报消息。在我看来，for循环会完全迭代，然后转到img.onload并附加图像。但是通过这种方式，仅附加了for循环的最后一个dataurl。无论如何，我可以在每次迭代期间执行此附加操作吗？预先谢谢你。

      let datapo = {{datapo|safe}};
  for (var key in datapo) {

     //alerts twice
     alert(key+" "+datapo[key]);

     var node = document.createElement("li");
     var d0 = document.createElement("div");
     var c = document.createElement("canvas");
     var c4 = c.getContext("2d");
     var d = new Date();
     var x0 =  d.getTime();

     c.id = 'can' + x0 ;

     c.width  = 200; // in pixels
     c.height = 100; // in pixels


     var myImg = new Image;


     myImg.src = datapo[key];
     myImg.width = c.width;
     myImg.height = c.height;


     myImg.onload = () => { c4.drawImage(myImg, 0, 0, c.width, c.height);

     document.body.appendChild(c); // adds the canvas to the body element
     node.appendChild(c);
     document.getElementById("piclist").append(node);

     //alerts only once
     alert(key+" "+datapo[key]);
     alert("test");

     };




  }