图片未显示在 GitHub 页面上？ [关闭]答案

【问题标题】：Image not displaying at a GitHub page? [closed]图片未显示在 GitHub 页面上？ [关闭]
【发布时间】：2022-01-21 07:41:29
【问题描述】：

从 windows 10 属性复制图像名称时，它不会显示在 GitHub 页面中。 添加代码：

<img src="https://ibb.co/gPvZ7JQ" width="300" height="300" alt="malak artwork">

【问题讨论】：

因为您想在img 标签内加载网页！
那不是图片。这是一个恰好包含图像的页面，就像您现在正在查看的页面恰好包含 StackOverflow 徽标一样。图像具有 MIME 类型，例如 image/png，通常以 .png 扩展名结尾。

标签： html github

【解决方案1】：

此问题的原因是您尝试加载带有<img> 标记的网页。

【讨论】：

还是不行:(
@MalakAnas 您可以查看我和 Skully 的答案，了解它为什么不起作用:(.

【解决方案2】：

您使用的 URL 中的图像来源不是实际的图像本身，而是随后呈现图像的网页。

<img> 属性应包含指向图像本身的直接链接，这可以通过确保 URL 以图像扩展名结尾（.png、.jpg、.gif 等）来轻松识别

在您指定的链接中，这是图片的正确直接链接：

&lt;img src="https://i.ibb.co/Nm123Kf/my-oc-Uw-U-modified.png" width="300" height="300" alt="malak artwork"&gt;

如果您想获取图像本身的直接链接以供将来参考，在大多数浏览器中您可以右键单击 -> 复制图像地址。

【讨论】：

【解决方案3】：

也许您忘记了 img src 标签中网址末尾的“.jpg:”。试试看：

<img src="https://ibb.co/gPvZ7JQ.jpg" width="300" height="300" alt="malak artwork">

【讨论】：

这不会将源 URL 转换为直接链接到网页上的图片，需要图片本身的直接 URL。
第一次尝试过但还是不行..

【解决方案4】：

作为 src https://ibb.co/gPvZ7JQ 的链接是一个 HTML 页面。

您可以通过执行 HEAD 请求来验证这一点。

我在 bash shell 中使用 curl

$ curl -I https://ibb.co/gPvZ7JQ
HTTP/1.1 200 OK
Server: nginx
Date: Sun, 19 Dec 2021 05:15:29 GMT
Content-Type: text/html; charset=UTF-8 >>>>>>>>>> HERE
...

content-type 表示浏览器能够呈现什么样的响应。

如果您在浏览器中访问 URL 并检查网页，请转到“网络”选项卡并设置 Img 过滤器，您可以看到此页面请求图像。 Screenshot

在图像请求的标头中，您可以看到这一点

accept-ranges: bytes
access-control-allow-methods: GET, OPTIONS
access-control-allow-origin: *
cache-control: max-age=315360000
cache-control: public
content-length: 311784
content-type: image/png >>>>> so this is an image

URL 不需要指明此资源是否为图像。

例如

https://example.com/image.png          # May or may not be an image, could be a 404 and a html
https://example.com/image              # May be an image even when `.png` isn't there in the url
https://example.com/image.html         # Can also be an image if the site developer is nuts

所以判断 URL 是否为图片（或视频之类的其他内容）的解决方案是关注 Content-Type 响应头。

这是每个浏览器都会做的事情，当您有疑问时也应该这样做。

在您的情况下，URL 将是 https://i.ibb.co/Nm123Kf/my-oc-Uw-U-modified.png，可以在网络选项卡中或通过图像上的检查元素找到。

【讨论】：