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

Question

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>

napolux · Accepted Answer · 2017-03-23 13:54:43Z

1

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?

answered Mar 23, 2017 at 13:54

napolux

16.2k9 gold badges55 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

D C Over a year ago

Yes it is connected to internet and it was tried from different machines in different networks in two different countries, and the image does not show up when requested from within the html page. Only if the link is written directly on the browser url tab

TrampolineTales · Accepted Answer · 2017-03-23 14:10:31Z

0

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 >

answered Mar 23, 2017 at 14:10

TrampolineTales

8274 gold badges15 silver badges32 bronze badges

1 Comment

D C Over a year ago

the width attribute does not make any difference, I can remove it, along with the border attribute, the image still does not shows up

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related