html img src=url 图片未从 html 显示，但确实从 url 显示答案

【问题标题】：html img src=url image not showing from html, but do appear from urlhtml img src=url 图片未从 html 显示，但确实从 url 显示
【发布时间】：2017-03-23 13:48:56
【问题描述】：

1) 我有这张来自另一个网站的图片，我想在我的 html 页面中显示，但它不起作用。 2）但是，如果我在浏览器中打开一个新选项卡，获取该链接并将其放入 url，我可以看到图像。 3）如果我先做 2 然后做 1，我可以在我的页面中看到图像，但如果我在 1 之后清除缓存则看不到知道如何从我的 html 代码中查看图像吗？谢谢

<html>
<head>
</head>
<body>

    <img id="imgMap"  src="https://uk-air.defra.gov.uk/assets/meto-maps/20170319_day1.png"  width="60%" border=1 ></img>

</body>
</html>

【问题讨论】：

标签： html image https

【解决方案1】：

您编写的代码有效，但问题可能是托管图像的服务器可能会阻止它在其他域/服务器上的显示。

所以对你来说，图像将被破坏。您确定您使用的服务器已连接到 Internet，并且该服务器未被图像的原始域列入黑名单吗？

【讨论】：

是的，它已连接到互联网，并且在两个不同国家/地区的不同网络中的不同机器上进行了尝试，当从 html 页面中请求时，图像不显示。仅当链接直接写在浏览器 url 选项卡上时

【解决方案2】：

width 属性搞砸了正在显示的图像，因为您使用的是百分比。根据<img>documentation on MDN：

width: 图像的固有宽度（以像素为单位）。在 HTML 4 中，百分比或像素都是可接受的值。然而，在 HTML5 中，只能接受像素。

您可以将width 属性与像素一起使用 (width: 50px)，或者如果您真的想使用百分比，请使用 CSS 样式：

&lt;img id="imgMap" src="https://uk-air.defra.gov.uk/assets/meto-maps/20170319_day1.png" style: width="60%" border=1 &gt;

【讨论】：

width属性没啥区别，我可以去掉，加上border属性，图片还是不显示