IPFS.GET -- can't display image using javascript

Help js-ipfs
1

I am successfully uploading image to IPFS and getting its hash/CID back. Also from terminal, i can use IPFS get command to get back that image.

However, from javascript I am unable to load image. In browser its showing broken image. If you are unable to find bug in my code; I would really appreciate if you can share your working code for it, that is, reading image and displaying from ipfs cid using javascript.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Party Profile</title>
</head>
<body>
    <h1> Party and Candidate Profile</h1>

    <div>
        <table id="candtable">
            <th>First Name</th>
            <th>Last Name</th>
            <th>Party Name</th>
            <th> Ethereum Address</th>
        </table>
    </div>

    <script type="text/javascript" src="./node_modules/web3/dist/web3.min.js"> </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script type="text/javascript" src="js/config/web3_config.js"></script>
    <script type="text/javascript" src="js/config/contracts_config.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/ipfs-http-client/dist/index.min.js" integrity="sha384-TZd6uhEzw5ux5y56frZt2Qgtx3t9c1zblH4KWPELpvWtrQZHuYeZGyq6xO4cr0xJ" crossorigin="anonymous"></script>
    <script type="text/javascript" src="./js/config/ipfs_config.js"></script>
    <script type="text/javascript" src="./js/operations/profile_ipfs.js"></script>
</body>
</html>

Below is javascript file

function getCandidateProfile() {

  let params = new URLSearchParams(location.search);
  let partyname = params.get('v');
  console.log("Inside profile.js: " + partyname);

  CANDIDATE_ContractObject.methods.getCandidateDataFromPartyName(partyname).call((error, result) => {
    if (result) {
      console.log("Inside getCandidateDatafromPartyName: " + result);
      fillTableData(result);

    }
    else {
      console.log("Error in profile.js..." + error);
    }

  });
}

function fillTableData(ethAdd) {

  CANDIDATE_ContractObject.methods.readCandidateProfile(ethAdd).call((error, result) => {
    console.log("Inside fillTableData...Calling readCandidateProfile is ok..." + result[0]);
    $("#candtable").append("<tr><td>" + result[0] + "</td>" + "<td>" + "<img id='myimage' width='100' height='100'>" + "</td>" + "<td>" + result[2] + "</td>" + "<td>" + result[3] + "</td></tr>");
    var cid = result[1];
    console.log("contentID..." + cid);
    loadImage(cid);
  });
}

async function loadImage(newcid) {
  for await (const file of ipfs.ls(newcid)) {
    console.log("File path...ipfs.ls: " + file.path)
  }

  for await (const file of ipfs.cat(newcid)) {
    console.log("File path...ipfs.cat: " + file.path)
  }
  // https://github.com/ipfs/js-ipfs/blob/master/docs/core-api/FILES.md

  for await (const file of ipfs.get(newcid)) {
    console.log("Received cid: " + newcid)
    console.log("File path...ipfs.get: " + file.path)
    console.log(file)

    //files.forEach((file) => {
    console.log(file.path);

    const content = [];

    //for await (const chunk of file.content) {
    //  content.push(chunk);
    //}
    for await (const buf of ipfs.get(newcid)) {
      content.push(buf);
    }
    document.getElementById('myimage').src = URL.createObjectURL(
      new Blob(content, { type: 'image/jpg' } /* (1) */)
    );

    //let objectURL = URL.createObjectURL(new Blob(content, { type: 'image/jpeg' }));
    //let myImage = new Image();
    //myImage.src = objectURL;
    //document.getElementById('myimage').appendChild(myImage)
  }

}

function loadpage() {
  getCandidateProfile();
}
2

Hey @ziash , Iā€™m having a similar problem. Were you able to solve this issue? If so, could you me let me know how. Thanks in advance.

3

Hey @nic89 and @ziash, does this code help?

/** Uses `URL.createObjectURL` free returned ObjectURL with `URL.RevokeObjectURL` when done with it.
 * 
 * @param {string} cid CID you want to retrieve
 * @param {string} mime mimetype of image (optional, but useful)
 * @param {number} limit size limit of image in bytes
 * @returns ObjectURL
 */
async function loadImgURL(cid, mime, limit) {
    if (cid == "" || cid == null || cid == undefined) {
        return;
    }
    for await (const file of ipfs.get(cid)) {
        if (file.size > limit) {
            return;
        }
        const content = [];
        if (file.content) {
            for await(const chunk of file.content) {
                content.push(chunk);
            }
            return URL.createObjectURL(new Blob(content, {type: mime}));
        }
    }
}

Display with:

<body>
<img id="myImage" />
<script>
async function setImage() {
    // just an example, make sure to free the resulting ObjectURL when you're done with it
    //
    // if your CID doesn't work, try this one: Qmcm32sVsMYhURY3gqH7vSQ76492t5Rfxb3vsWCb35gVme
    // that's a popular CID, which should resolve every time
    document.getElementById("myImage").src = await loadImgURL("QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE", "image/png", 524288);
}
setImage();
</script>
</body>
1 Like