# How to ipfs.dag.get the image in browser

**URL:** <https://discuss.ipfs.tech/t/how-to-ipfs-dag-get-the-image-in-browser/15938>\
**Category:** Help\
**Tags:** js-ipfs\
**Created:** [February 4, 2023, 8:27am UTC](https://discuss.ipfs.tech/t/how-to-ipfs-dag-get-the-image-in-browser/15938 "2023-02-04T08:27:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nc163](https://avatars.discourse-cdn.com/v4/letter/n/dbc845/32.png) [@nc163](https://discuss.ipfs.tech/u/nc163)\
**Post date:** [February 4, 2023, 8:27am UTC](https://discuss.ipfs.tech/t/how-to-ipfs-dag-get-the-image-in-browser/15938/1 "2023-02-04T08:27:13Z")

</div>

I want to use ipds.dag.get to get an image and display it in an img tag.  
The following code is breaking the image, what is wrong?

```auto
if(!ipfs) return
let cid = CID.parse("QmQqzMTavQgT4f4T5v6PWBp7XNKtoPmC9jvn12WPT3gkSE")
let data = await ipfs.dag.get(cid);
// console.log(JSON.stringify(data,null,2))
let blob = new Blob([data.value.Data], { type: "image/png" })
console.log(data.value.Data)
console.log(blob)
const img = document.getElementById( 'img' );
let url = window.URL.createObjectURL(blob)
img.src = url

```

Images can be found at the gateway.  
 ![](https://us1.discourse-cdn.com/flex020/uploads/ipfs1/original/2X/d/d34c7cb5b7b5f0133e4b76e1e403787caf0ef5f5.png)  
 ![スクリーンショット 2023-02-04 17.25.25](https://us1.discourse-cdn.com/flex020/uploads/ipfs1/original/2X/3/3dd40b2b0f546b8e5bc8b425aebcad95fbb7eb24.png)

---

<div class="post-metadata">

**Author:** ![nc163](https://avatars.discourse-cdn.com/v4/letter/n/dbc845/32.png) [@nc163](https://discuss.ipfs.tech/u/nc163)\
**Post date:** [February 4, 2023, 8:29am UTC](https://discuss.ipfs.tech/t/how-to-ipfs-dag-get-the-image-in-browser/15938/2 "2023-02-04T08:29:54Z")

</div>

I’m using ipfs-core version  
`ipfs-core": "version": "0.18.0"`

---

<div class="post-metadata">

**Author:** ![nc163](https://avatars.discourse-cdn.com/v4/letter/n/dbc845/32.png) [@nc163](https://discuss.ipfs.tech/u/nc163)\
**Post date:** [February 4, 2023, 7:13pm UTC](https://discuss.ipfs.tech/t/how-to-ipfs-dag-get-the-image-in-browser/15938/3 "2023-02-04T19:13:37Z")

</div>

I ran the following code to confirm.

```javascript
async function addFile () {
  const { cid } = await ipfs.add('こんにちは')
  console.log(cid.toString())
} 
addFile()

```

CID is `QmcZFY95TMnf57CuVaVPUaPyLiSsCWdacSxrLZYywqLDQS`

Next, i run the following code

```javascript
let cid = CID.parse("QmcZFY95TMnf57CuVaVPUaPyLiSsCWdacSxrLZYywqLDQS")
let data = await ipfs.dag.get(cid);
let blob = new Blob([data.value.Data], { type: "image/png" })
let reader = new FileReader();
reader.onload = () => e.innerText = this.replaceControlCharacters(reader.result, "")
fr.readAsText(blob, "UTF-8");

```

reader.result contained control codes.  
[BS][STX][DC2][STX]  
And i found the similar in the image data.I don’t know what this is… or is the code wrong?  
Can someone please help me…

---

<div class="post-metadata">

**Author:** ![Discordian](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.ipfs.tech/discordian/32/4692_2.png) [@Discordian](https://discuss.ipfs.tech/u/Discordian)\
**Post date:** [February 6, 2023, 4:02pm UTC](https://discuss.ipfs.tech/t/how-to-ipfs-dag-get-the-image-in-browser/15938/4 "2023-02-06T16:02:16Z")

</div>

This there any reason you’re using `ipfs.dag.get` for this? `ipfs.dag.get` gets a DAG node, if you want to display an image, the easiest way to do that would likely be through `ipfs.cat`:

```js
/** 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
 * @param {number} limit size limit of image in bytes
 * @returns ObjectURL
 */
async function loadImgURL(cid, mime, limit) {
    if (cid == "" || cid == null || cid == undefined) {
        return;
    }
    const content = [];
    for await (const chunk of ipfs.cat(cid, {length:limit})) {
        content.push(chunk);
    }
    return URL.createObjectURL(new Blob(content, {type: mime}));
}

```

I hope this helps.

---

<div class="post-metadata">

**Author:** ![nc163](https://avatars.discourse-cdn.com/v4/letter/n/dbc845/32.png) [@nc163](https://discuss.ipfs.tech/u/nc163)\
**Post date:** [February 7, 2023, 7:02pm UTC](https://discuss.ipfs.tech/t/how-to-ipfs-dag-get-the-image-in-browser/15938/5 "2023-02-07T19:02:26Z")

</div>

I was missunderstanding DAG API.  
Your code worked, thank you!!