AR 空間に２Dイメージを出現させる方法がわかりません。

実現したいこと

ウェブカメラと２Dイメージを同時に写し、AR空間に２Dイメージを乗せたいと思っています。

発生している問題・分からないこと

実際にコードはすでにあるのですが、2Dイメージが実装画面に表示されないのが問題になっております。

エラーメッセージ

error
1エラーメッセージはないのですが、表示されません。

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script type="text/javascript" src="https://raw.githack.com/AR-js-org/AR.js/master/three.js/build/ar-three-location-only.js"></script>
    <script type="text/javascript" src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <script src="http://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
    <title>AR Page</title>
</head>
<body>
    <a-scene
    cursor='rayOrigin:mouse; fuse: true; fuseTimeout:0;'
    raycaster="objects: .interactive;"
    vr-mode-ui="enabled: false"
    arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false'
    renderer='antialias: true; alpha: true'>

    <a-assets>
        <img id="gate4" src="images/TORII.png" alt="gate4">
    </a-assets>
    
    <a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>
    <a href="https://www.japan-guide.com/e/e3902.html">
        <button style="position: absolute; top: 10px; left: 10px; font-size: 20px; z-index: 9999;">MORE</button>
    </a>
    <a-image class="interactive" onclick="window.location.href='https://www.japan-guide.com/e/e3902.html'" 
    src="#gate4" position="0 -10 -40" scale="0.00001 0.000001" width="0.5" height="0.25" rotation="100 0 0"></a-image>
    </a-scene>
</body>
</html>