When copying image name from properties windows 10 it won't show up in GitHub pages. code added:
<img src="https://ibb.co/gPvZ7JQ" width="300" height="300" alt="malak artwork">
The source of the image in the URL you are using is not the actual image itself but rather a web page that subsequently renders the image.
The <img>
attribute should contain a direct link to the image itself, this can easily be identified by ensuring the URL ends with the image extension (.png
, .jpg
, .gif
, etc.)
In the link you have specified, here is the correct direct link to the image:
<img src="https://i.ibb.co/Nm123Kf/my-oc-Uw-U-modified.png" width="300" height="300" alt="malak artwork">
For future reference if you want to obtain the direct link to an image itself, in most browsers you can Right Click -> Copy Image Address.
The link you have as src https://ibb.co/gPvZ7JQ is an HTML page.
You can verify that by performing a HEAD request.
I'm using curl in a bash shell
$ 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
...
The content-type
indicates what kind of response it is for the browser to be able to render.
If you visit the URL in the browser and inspect the webpage go to the Network tab and set the Img filter you can see this page requesting the image. Screenshot
In the headers for the image's request you can see this
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
The URL need not indicate whether this resource is an image or not.
For example
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
So the solution for determining whether the URL is an image (or something else like video) is to pay attention to the Content-Type
response header.
This is what every browser does and you should do too when in doubt.
And in your case, the URL will be https://i.ibb.co/Nm123Kf/my-oc-Uw-U-modified.png which can be found in the network tab or by inpect element on the image.
The reason for this issue is that you are trying to load a webpage with an <img>
tag.
maybe you forgot the ".jpg:" at the end of the url in your img src tag. Try :
<img src="https://ibb.co/gPvZ7JQ.jpg" width="300" height="300" alt="malak artwork">
img
tag!image/png
and generally end in a.png
extension.