CODEWITHSUNDEEP
htmlimagehttps
D C
D C

Reputation: 21

html img src=url image not showing from html, but do appear from url

1) I have this image from another website that i want to show in my html page, but it does not work. 2) However if I open a new tab in the browser, take that link and put it in the url, I can see the image. 3) If I do 2 first and then 1, i can see the image in my page, but not if I clear the cache after 1 Any idea how to see the image from my html code ? Thanks

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

Upvotes: 2

Views: 5104

Answers (2)

TrampolineTales
TrampolineTales

Reputation: 826

The width attribute is screwing up the image being displayed because you're using a percentage. According to the <img> documentation on MDN:

width: The intrinsic width of the image in pixels. In HTML 4, either a percentage or pixels were acceptable values. In HTML5, however, only pixels are acceptable.

You can either use the width attribute with pixels (width: 50px), or if you really want to use a perecentage, use CSS styling:

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

Upvotes: 0

napolux
napolux

Reputation: 16074

The code you made works, but the problem could be that the server where the image is hosted can block the display of it on other domains/server.

So for you the image will be broken. Are you sure the server you're using is connected to the Internet and that is not blacklisted by the original domain of the image?

Upvotes: 1

Related Questions