Display image url use AXIOS combine with laravel

now im doing AXIOS code combine with laravel to get image from instagram URL. the URL is this https://www.instagram.com/p/B_zZCRpB895/media/?size=t

AXIOS is new from me. to get the image, i tried this simple code. i set this code into my frontend site

<img id="imgsrc" src="" > 

<script>
 axios
  .get('https://www.instagram.com/p/B_zZCRpB895/media/?size=t', {
    responseType: 'arraybuffer'
  })
  .then(response => {
    const buffer = Buffer.from(response.data, 'base64');
    document.getElementById("imgsrc").src = Buffer;
    console.log(Buffer);  
  })
  .catch(ex => {
    console.error(ex);
  });
</script>

but the image not display into <img id="imgsrc" src="" >

i really want that, when we open the page. the instagram image can display.

how to solve this matter. please help.

Answer

you can use file reader to get base64 and set it as the image source :

<script>
    axios.get('https://www.instagram.com/p/B_zZCRpB895/media/?size=t', {responseType: "blob"})
        .then(function (response) {
            var reader = new window.FileReader();
            reader.readAsDataURL(response.data);
            reader.onload = function () {
                document.getElementById("imgsrc").src = reader.result;
            }
        });
</script>

Advertisement

Answer