ARでオリジナルのマーカーを使用して画像を表示したい

ARでオリジナルのマーカーの上に画像を表示したいのですが、うまくいきません。
マーカーを**<a-marker preset="hiro">**にすると読み込みはするのですが、出て欲しい画像ではなく真っ黒の正方形が出てしまいます。
参考にしたコードを貼り付けただけのような状態から進んでいませんが、教えていただけると嬉しいです。

参考
ノートPCのカメラとAR.js＋A-Frameでマーカー型AR（拡張現実）を動かす。

<!doctype HTML>
<html>
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded arjs="debugUIEnabled: false" vr-mode-ui="enabled: false">
  <a-assets>
    <img id="wao" src="./ARpic.png">　<!--画像が真っ黒の正方形になる-->
  </a-assets>
  <a-marker preset="hiro">  <!--オリジナルのマーカーにすると読み込まなくなる-->
    <a-entity>
      <a-image src="#wao" width="2" height="2" rotation="-90 0 0"></a-image>
    </a-entity>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>
</body>
</html>