【问题标题】:How To show this instagram image in <img> tag如何在 <img> 标签中显示此 Instagram 图片
【发布时间】:2022-01-23 21:23:24
【问题描述】:

【问题讨论】:

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

标签: javascript html fetch fetch-api


【解决方案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

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

【讨论】:

  • 好的,谢谢先生。我会阅读文档并尝试一下
  • 告诉我。我们使用跨域镜像只是因为我们有两台服务器和两个域,所以我至少设置了一次。如果你不明白,我会回去看看我们做了什么。
猜你喜欢
  • 2015-03-15
  • 1970-01-01
  • 2021-10-16
  • 2023-03-20
  • 1970-01-01
  • 2018-07-22
  • 2021-08-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多