How to open a picture from an api call in js?

Question

I am making a js POST api call to a server. It responds back with a .jpg image. Here is my code:

 function arCall(url = '', data = {}) {
  var ARCSRFToken;
  fetch('/session/token')
  .then(res => res.text())
  .then(text => {
    ARCSRFToken = text
  })
  .then(() => {
  //console.log(ARCSRFToken)
  fetch(url, {
    method: 'POST', 
    mode: 'cors', 
    headers: {
      'Accept': 'text/html, */*',
      'X-CSRF-Token': `${ARCSRFToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data) 
  })
  .then((res) => {
    console.log(res)
    return res.text();
  })
  .then(data => console.log(data))
})
}

arCall('<The URL>', { id: 100 });

For the console.log(data) line, I get a response [img name].jpg. But, the image itself doesn't display on the page.

I looked at this question Fetch image from API and altered my code based on it but that still did not seem to do the trick. Now, all I get is a URL and when I open it, it says page not found.

 function arCall(url = '', data = {}) {
  var ARCSRFToken;
  fetch('/session/token')
  .then(res => res.text())
  .then(text => {
    ARCSRFToken = text
  })
  .then(() => {
  //console.log(ARCSRFToken)
  fetch(url, {
    method: 'POST', 
    mode: 'cors', 
    headers: {
      'Accept': 'text/html, */*',
      'X-CSRF-Token': `${ARCSRFToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data) 
  })
  .then((res) => {
    console.log(res)
    return res.blob();
  })
  .then(imageBlob => {
    const imageObjectURL = URL.createObjectURL(imageBlob)
    console.log(imageObjectURL)
  })
})
}

arCall('<The URL>', { id: 100 });

The only thing I want to do is display the .jpg picture on the page.

where do you want to show it? do you want to show it on the ```DOM```? — Iman Hosseini Pour, Dec 19 '22 at 17:01

score 1 · Answer 1 · answered Dec 19 '22 at 17:04

I get a response [img name].jpg

So you get a piece of text which gives you the file name of the image. This is the file name of an image and not an actual image.

I looked at this question Fetch image from API

Stop. You have the file name of an image and not an actual image. That question is all about when you have a URL to the actual image.

But, the image itself doesn't display on the page.

You are passing a string with the file name to console.log.

There's no reason why that should cause the image to display on the page.

If you want to display an image on the page then you need to create an image, then set it's src attribute to be a URL that points to the image (maybe you can work out what that is based on the filename in the string, if not you need to make improvements to the API) and then append the image element to somewhere inside the document.

score 1 · Accepted Answer · answered Dec 19 '22 at 17:06

You need to either create an image element or find one in your dom.

Create an image element:

const imgUrl = "http://..."
const img = document.createElement('img');
img.src = imgUrl;
document.getElementById('body').appendChild(img);

Or find one on in your DOM:

const imgUrl = "http://..."
const imgInDom = document.findElementById("someId")
imgInDom.src = imgUrl

score 0 · Answer 3 · answered Dec 19 '22 at 17:07

You Can do it easily in this way.

<body>
    <img id="imgTag" src="" alt="">
</body>
<script>
    const imgTag = document.getElementById("imgTag")
    imgTag.setAttribute("src" , 'https://picsum.photos/200/300')
</script>

You can use setAttribute method to set src attribute on your img tag.

How to open a picture from an api call in js?

3 Answers3