Not pulling images to basic dapp?

Moralis General
#1

ive been trying to add a nfts function into a basic dapp for my first one. i was having issues before with it trying to read a null image which is now fixed on line 102 i had to add nfts?.results?.forEach after sorting out the null issue but now its just not pulling the images to display at all. im very new so any advice would help ty C:

#2

You can console log and see if you are getting the metadata.image_url string in the first place?

Also, instead of screenshots, it is more convenient if you can share the code as a preformatted text here.

Thanks

#4 
console.log('Welcome to the Society');

      // connect to Moralis server
      const serverUrl = "https://smvqkityr4tw.usemoralis.com:2053/server";
      const appId = "6xCAiHw3eryOJpOUaYEBzTAnq9D6y08bZP0EXjt5";
      Moralis.start({ serverUrl, appId });

      let homepage = "http://127.0.0.1:5500/signinindex.html"
      if (Moralis.User.current() == null && window.location.href != homepage) {
            document.querySelector('body').style.display = 'none';
            window.location.href = "signinindex.html";
      }

      login = async () => {
            await Moralis.authenticate().then(async function (user) {
                  console.log('Logged In');
                  console.log(Moralis.User.current());
                  user.set("name", document.getElementById('user-username').value);
                  await user.save();
                  window.location.href = "dashboardindex.html";
              })
      }

      logout = async () => {
            await Moralis.User.logOut();
            window.location.href = "signinindex.html";
      }
      
      getTransactions = async () => {
      console.log('get transactions clicked')
      const transactions = await Moralis.Web3API.account.getTransactions();
      console.log(transactions);

      if(transactions.total > 0){
            let table = `
            <table class="table">
                  <thead>
                        <tr>
                              <th scope="col">Transaction</th>
                              <th scope="col">Block Number</th>
                              <th scope="col">Age</th>
                              <th scope="col">Type</th>
                              <th scope="col">Fee</th>
                              <th scope="col">Value</th>
                        </tr>
                  </thead>
                  <tbody id="theTransactions">
                  </tbody>
            </table>
            `
            document.querySelector('#tableOfTransactions').innerHTML = table;

            
            transactions.result.forEach(t => {
                  let content = `
                  <tr>
                        <td><a href='https://etherscan.io/tx/${t.hash}' target="_blank" rel="noopen norefferer">${t.hash}</a></td>
                        <td><a href='https://etherscan.io/block/${t.block_number}' target="_blank" rel="noopen norefferer">${t.block_number}</a></td>
                        <td>${millisecondsToTime(Date.parse(new Date()) - Date.parse(t.block_timestamp))}</td>
                        <td>${t.from_address == Moralis.User.current().get(`ethAddress`) ? `Outgoing` : `Incoming`}</td>
                        <td>${((t.gas * t.gas_price) / 1e18).toFixed(5)} ETH</td>
                        <td>${(t.value  / 1e18).toFixed(5)} ETH</td> 

                  </tr>
                  `
                  theTransactions.innerHTML += content;
            })


      }
      }

getBalances = async () => {
      console.log(`Get balances clicked`);
      const ethBalance = await Moralis.Web3API.account.getNativeBalance();

      let content = document.querySelector('#userBalances').innerHTML = `
      <table class="table">
      <thead>
            <tr>
                  <th scope="col">Chain</th>
                  <th scope="col">Balance</th>
            </tr>
      </thead>
      <tbody>
            <tr>
                  <th>Ether</th>
                  <td>${(ethBalance.balance / 1e18).toFixed(5)} ETH</td>
            </tr>
      </tbody>
      </table>
      `
}

getNFTs = async () => {
      console.log('get nfts clicked');
      let nfts = await Moralis.Web3API.account.getNFTs();
      console.log(nfts);
      let tableOfNFTs = document.querySelector('#tableOfNFTs');

      if(nfts.result.length > 0){
            nfts?.results?.forEach(n => {
                  let metadata = JSON.parse(n.metadata);
                  let content = `
                  <div class="card col-md-3">
                        <img src="${metadata.image_url}" class="card-img-top" height=300>
                        <div class="card-body">
                              <h5 class="card-title"> ${metadata.name}</h5>
                              <p class="card-text">${metadata.description}</p>
                        </div>
                  </div>
                  `
                  tableOfNFTs.innerHTML += content;

                  var object = {
                        required: true
                      };
                      var template = '';
                      
                      template += '<div class="form-group col-lg-12">';
                      template += '<label class="control-label"' + (object.required  ? ' required>' : '>');
                      
                      document.body.innerText = null;
            })
      }
}

// Currenttime(ms) - Block time(ms) = TIME IN MILL

millisecondsToTime = (ms) => {
      let minutes = Math.floor(ms / (1000 * 60));
      let hours = Math.floor(ms / (1000 * 60 * 60));
      let days = Math.floor(ms / (1000 * 60 * 60 * 24));

      if(days < 1 ){
            if(hours < 1 ){
                  if(minutes < 1 ){
                        return `less than a minute ago`
                  } else return `${minutes} minutes(s) ago`
            } else return `${hours} hours(s) ago`
      } else return `${days} days(s) ago` 
}

if(document.querySelector('#btn-login') != null){
      document.querySelector('#btn-login').onclick = login;
}
if(document.querySelector('#btn-logout') != null){
      document.querySelector('#btn-logout').onclick = logout;
}
if(document.querySelector('#get-transactions-link') != null){
      document.querySelector('#get-transactions-link').onclick = getTransactions;
}
if(document.querySelector('#get-balances-link') != null){
      document.querySelector('#get-balances-link').onclick = getBalances;
}
if(document.querySelector('#get-NFTs-link') != null){
      document.querySelector('#get-NFTs-link').onclick = getNFTs;
}






// get-NFTs-link
// get-transactions-link
// get-balances-link