显示图像网址使用 AXIOS 与拉拉维尔相结合

Question

现在我正在做AXIOS代码与Laravel相结合，从Instagram URL获取图像。 网址是这个https://www.instagram.com/p/B_zZCRpB895/media/?size=t

AXIOS对我来说是新的。 为了获得图像，我尝试了这个简单的代码。 我将此代码设置到我的前端站点中

<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>

但图像未显示在<img id="imgsrc" src="" >

我真的很想要，当我们打开页面时。 Instagram图像可以显示。

怎么解决这件事，请帮忙。

Answer 1

您可以使用File Reader获取base64并将其设置为图像源：

<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>

Answer 2

您是否使用axios 通过 AJAX 调用检索它有特殊原因？

您提供的终端节点已返回图像源。要使其出现在图像元素中，您需要做的就是将 src 设置为端点 URL，如下所示。除非需要运行进程对图像执行某些操作，否则不需要将数据作为数组缓冲区获取。

document.getElementById("imgsrc").src = "https://www.instagram.com/p/B_zZCRpB895/media/?size=t";