NFT SVG not loading

Any idea why I can’t fetch the aavegotchi NFT?



<!--

1) AUTHENTICATE WITH METAMASK
2) ADD USER TO DB
3) ADD MORE DATA TO THE USER PROFILE

-->

<html>
<head>
  <title>Metamask Demo</title>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
  <script src="https://npmcdn.com/[email protected]/dist/moralis.js"></script>
  <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script>
  <script src="https://unpkg.com/moralis/dist/moralis.js"></script>



</head>

<body>

  <button onclick="login()">Login with Metamask</button>

  <script>
    Moralis.initialize("XXX"); // Application id from moralis.io
    Moralis.serverURL = "XXX"; //Server url from moralis.io

    var state = {}
    var sprites = []
    var buttonsLocked = {}


    async function login(){
      console.log("login clicked");
      var user = await Moralis.Web3.authenticate();
      if(user){
        console.log(user);
      }
    }

    

    var config = {
      type: Phaser.AUTO,
      width: 1200,
      height: 700,
      scene: {
        preload: preload,
        create: create,
        update: update
      },
      physics: {
        default: 'arcade',
        arcade: { debug: true }
      }
    };

    var game = new Phaser.Game(config);
    var context;

    function preload ()
    {
      ping();
      context = this;
      context.load.image('background', 'bg.jpeg');
    }

    async function create ()
    {
      this.wKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);
      this.aKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
      this.sKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S);
      this.dKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);

      // wait for game state update
      let query = new Moralis.Query("GameState");
      let subscription = await query.subscribe();
      query.equalTo("stateType", "globalGameState");
      subscription.on('update', (object) => {
        state = object.get("state");
        console.log(state)
      });


      // get current state
      state = await Moralis.Cloud.run("getState")

      context.add.image(0, 0, 'background').setOrigin(0,0).setScale(1,1);
    }

    async function  update ()
    {
      cursors = this.input.keyboard.createCursorKeys();
      const params =  { cursors: cursors };

      if (this.wKey.isDown) {

        if(!buttonsLocked["up"]){
          console.log('W is pressed');

          buttonsLocked["up"]=true;
          await Moralis.Cloud.run("move", {direction:"up"});
          buttonsLocked["up"]=false;
        }

      }
      else if(this.aKey.isDown){
        if(!buttonsLocked["left"]){
          console.log('A is pressed');

          buttonsLocked["left"]=true;
          await Moralis.Cloud.run("move", {direction:"left"});
          buttonsLocked["left"]=false;
        }
      }
      else if(this.sKey.isDown){
        if(!buttonsLocked["down"]){
          console.log('S is pressed');

          buttonsLocked["down"]=true;
          await Moralis.Cloud.run("move", {direction:"down"});
          buttonsLocked["down"]=false;
        }
      }
      else if(this.dKey.isDown){
        if(!buttonsLocked["right"]){
          console.log('D is pressed');

          buttonsLocked["right"]=true;
          await Moralis.Cloud.run("move", {direction:"right"});
          buttonsLocked["right"]=false;
        }
      }

      drawState()
    }

    async function ping(){
      setTimeout(ping,1000)
      await Moralis.Cloud.run("ping");
    }



    function drawState(){

      for (let userId in state) {

        // new player that we haven't seen - need to load image, create sprite
        if(!sprites[userId]){

          sprites[userId] = {loading:true}

          const svgBlob = new Blob([state[userId].svg], {type:"image/svg+xml;charset=utf-8"})
          const url = URL.createObjectURL(svgBlob)

          context.load.image('player'+userId,url).on('filecomplete', function(){
            if(sprites[userId].loading)
            {
              sprites[userId].loading = false
              setTimeout(function(){ //had to add this delay for images to always show
                sprites[userId] =  context.physics.add.image(state[userId].x, state[userId].y, 'player'+userId).setScale(0.5,0.5).setOrigin(0,0);
              },1000)
            }
          }, context);
          context.load.start()
        }
        // existing player - just move around existing sprite
        else{

          if(sprites[userId].x<state[userId].x)
            sprites[userId].x+=5;

          else if(sprites[userId].x>state[userId].x)
              sprites[userId].x-=5;



          if(sprites[userId].y<state[userId].y)
              sprites[userId].y+=5;

          else if(sprites[userId].y>state[userId].y)
              sprites[userId].y-=5;

        }
      }

    }


  </script>

<button id="btn-login" onclick="buycrypto()">Buy Crypto</button>

        <br><br>

        <script>
      (async function(){
          Moralis.initPlugins();
      })();
      
      function buycrypto(){
          Moralis.Plugins.fiat.buy();
      }

        </script>

  </body>





</body>


</html>

Not getting any errors but the NFT just does not load on the background image for some reason. I’ve copied the same cloud.js code and uploaded it onto the server as well

this is where it should load the image?
do you have that image in the local folder?

Hey that is the background image. I’m talking about the NFT from my Metamask on Kovan. The bg.jpeg loads fine. The NFT is supposed to load on top of the background just like Ivan’s Aavegotchi tutorial. I’ve acquired an Aavegotchi on the Kovan testnet as well.

ok, what is the code that should load that NFT image?

unrelated, you could replace this:
<script src="https://npmcdn.com/[email protected]/dist/moralis.js"></script>
with
<script src="https://npmcdn.com/[email protected]/dist/moralis.js"></script>
to have a newer SDK version

if(!sprites[userId]){

          sprites[userId] = {loading:true}

          const svgBlob = new Blob([state[userId].svg], {type:"image/svg+xml;charset=utf-8"})
          const url = URL.createObjectURL(svgBlob)

          context.load.image('player'+userId,url).on('filecomplete', function(){
            if(sprites[userId].loading)
            {
              sprites[userId].loading = false
              setTimeout(function(){ //had to add this delay for images to always show
                sprites[userId] =  context.physics.add.image(state[userId].x, state[userId].y, 'player'+userId).setScale(0.5,0.5).setOrigin(0,0);
              },1000)
            }
          }, context);
          context.load.start()
        }

This is the code that is supposed to load the image

can you add a console.log(url) to see if it is set?

http://127.0.0.1:5500/4983e714-623d-4567-ba3f-e643db1952f3

I get this and when I try to open it I get this:

Cannot GET /4983e714-623d-4567-ba3f-e643db1952f3

I get this error