0

This likely goes beyond Solidity code so may be off topic, apologies in advance if that's the case.

Working on a collectible card game based on ERC721 with the metadata extension. When a person "collects" a warrior, it is successfully "minted" to the owner and the tokenURI is successfully set to the path of the json file with the metadata (name, description, image path) in it.

My question is how do I now get that metadata (especially the image) so I can show it on my website? I have a page that displays the warriors the person has collected. On that page I'm successfully getting the info for the warrior structs and painting to the page. Here's that code I have in my app.js file:

function getWarriorsByOwner(owner) {
return new Promise(function (resolve, reject) {
App.contracts.WarriorFactory.deployed().then(function(instance){
  instance.getWarriorsByOwner.call(owner)
    .then(function(warriors){
      resolve(warriors);
    });
});
});
}

function displayWarriors(ids) {
$("#warriors").empty();
for (id of ids) {
// Look up warrior details from our contract. Returns a `warrior` object
getWarriorDetails(id.toNumber())
.then(function(warrior) {

// Using ES6's "template literals" to inject variables into the HTML.
// Append each one to our #warriors div
$("#warriors").append(`<div class="col-md-4">
<div class="card mb-4 shadow-sm">
  <img class="card-img-top" src="" alt="Card image cap">
  <div class="card-body">
  <h5 class="card-title card-name">${warrior[0].toString()}</h5>
  <strong>Attack</strong>: ${warrior[1].toString()}<br/>
  <strong>Defend</strong>: ${warrior[2].toString()}<br/>
  <strong>Strategy</strong>: ${warrior[3].toString()}
  <strong>Cards Issued</strong>: ${warrior[4].toString()}
  <strong>Total Cards</strong>: ${warrior[5].toString()}
  </div>
  </div>
</div>`);
});
}
}

So, if a person owns warrior 0 in the warriors array, I get all the attributes for that warrior. If I call tokenURI(0) I also see the correct path to the json file with the rest of the info in it that I don't keep on chain.

What would I need to add to also read the correct json file and set the image source here in the above:

<img class="card-img-top" src="" alt="Card image cap">

I'm very new to this which means I know just enough to be tempted to do very stupid things, the above may be an awesome example of just that.

Any advice? Thanks, Kevin

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.