如何在 <img> 标签中显示此 Instagram 图片

Posted 2023-02-27

【中文标题】如何在 <img> 标签中显示此 Instagram 图片

【英文标题】：How To show this instagram image in <img> tag

【发布时间】：2022-01-23 21:23:24

【问题描述】：

我有这个来自 rapidapi 的 Instagram API 文档的链接：

https://scontent.cdninstagram.com/v/t51.2885-15/e35/269712310_436481731535085_8695389625620774366_n.jpg?se=7&_nc_ht=scontent.cdninstagram.com&_nc_cat=109&_nc_ohc=HfWwIW5-x70AX9BJWBL&edm=APU89FABAAAA&ccb=7-4&ig_cache_key=MjczNDM4MTI4ODc3MDQwNTM0NQ%3D%3D.2-ccb7-4&oh=00_AT8uLNghm5TV3utSE-zgMc8906FeybBezkArruEr9yh8Jg&oe=61CB3215&_nc_sid=86f79a

当我将此链接放在图像标签中时，它给了我一个错误：

“GET https://scontent.cdninstagram.com/v/t51.2885-15/e35/269712310_436481731535085_8695389625620774366_n.jpg?se=7&_nc_ht=scontent.cdninstagram.com&_nc_cat=109&_nc_ohc=HfWwIW5-x70AX9BJWBL&edm=APU89FABAAAA&ccb=7-4&ig_cache_key=MjczNDM4MTI4ODc3MDQwNTM0NQ%3D%3D.2-ccb7-4&oh=00_AT8uLNghm5TV3utSE-zgMc8906FeybBezkArruEr9yh8Jg&oe=61CB3215&_nc_sid=86f79anet::ERR_BLOCKED_BY_RESPONSE.NotSameOrigin 200”

你们知道如何解决这个问题吗？如何在我的网站上显示图像。如果你能帮忙，请帮忙！！

【问题讨论】：

请只添加相关的标签。我删除了 php 标记，因为您似乎不想要 PHP 解决方案（根据您对其中一个答案的评论）

【参考方案1】：

类似这样的：

<?php

$image = file_get_contents("https://scontent.cdninstagram.com/v/t51.2885-15/e35/269712310_436481731535085_8695389625620774366_n.jpg?se=7&_nc_ht=scontent.cdninstagram.com&_nc_cat=109&_nc_ohc=HfWwIW5-x70AX9BJWBL&edm=APU89FABAAAA&ccb=7-4&ig_cache_key=MjczNDM4MTI4ODc3MDQwNTM0NQ%3D%3D.2-ccb7-4&oh=00_AT8uLNghm5TV3utSE-zgMc8906FeybBezkArruEr9yh8Jg&oe=61CB3215&_nc_sid=86f79a");
$imageData = base64_encode($image);
echo '<img src="data:image/jpeg;base64,'.$imageData.'">';

【讨论】：

你知道如何在 html 和 javascript 中解决这个问题，因为我还没有学习 php

@Coding_Nerd 为什么要标记 PHP？

【参考方案2】：

对我来说听起来像是一个 CORS 问题。我相信您可以绕过 CORS 获取 img 元素：

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

通过赋予 img 元素一个值为“匿名”的跨域属性：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin

但我相信，如果属性存在且未指定值，则默认为匿名。

【讨论】：

好的，谢谢先生。我会阅读文档并尝试一下

告诉我。我们使用跨域镜像只是因为我们有两台服务器和两个域，所以我至少设置了一次。如果你不明白，我会回去看看我们做了什么。