URL authentication in <img>'s src attribute - html

I'm trying to get a live image from a camera using basic authentication in the url string.
To confirm that this works, writing something like the below into the browser works:
http://user:password#ipaddress/path-to-live-stream
But if I put the same url into the 's src attribute:
<img src="http://user:password#ipaddress/path-to-live-stream" />
This, however, does not work.
Even if this is by design or not, how can I make this work? How can I use basic url authentication to get a live stream or image from any source?

Related

How can I add an image into a Slate code sandbox?

I am not able to reference a URL pointing to an image stored within Foundry within the code sandbox.
While the following works in the HTML widget, it does not work in the code sandbox:
<img src="https://<stack-name>.com/blobster/api/salt/<resource-id>"
alt="" width="200" height="200">
To use the tag within the code sandbox you will have to encode your image using base64. The resulting data URL can be decoded by the code sandbox and the image will be displayed. You can read more on data URLs and base64 here. To encode your image into base64 you can use any tool in the internet that lets you upload an image and returns a valid data url.
Example data url:

Random images on 'refresh' in HTML without JavaScript

I once saw in a tutorial video about an HTML line of code that generates random images that it fetches from the internet and puts into the webpage, I remember it being a normal img tag but inside the ref attribute contained a link that now I don't remember what it was.
Searched about this in Google but all I could find was about loading images from the directory or using the help of Javascript.
This is possible by delegating the randomness to the server that serves the images. Consider the service provided by PlaceIMG. Setting any <img/> tag to one of their URLs will let your show a "random" image. What is actually happening is that the backend gets a request for an image and serves any image it wants.
You can do this with your own, self-hosted image server and in basically any server-side language and without client-side JavaScript. However, there has to be logic somewhere to do the randomness:
<img src="https://placeimg.com/640/480/any" />
There are many sites that serve as random image source, for example https://picsum.photos.
Working example (refresh to see the effect):
<img src="https://picsum.photos/200">

appending relative href link to the current url without javascript

seems like a very trivial problem but I am unable to figure it out.
I am on page http://example.com/emails
and I would like to add a hyperlink as
inbox
this results in a http://example.com/inbox
but I would like it to go to http://example.com/emails/inbox
Obviously I can do that by writing full href link
inbox
Other method is using javascript to get the current window url and append href with that.
but I am wondering if there is already a way to handle this simply in html without using javascript just by using some relative url scheme.
If you don't want to use JS for taking the full URL/current page URL then you can use PHP. You can use PHP $_SERVER Superglobal built-in variable to get the current page URL. Here I am sharing 2-references for your better understanding, please go through this link hopefully it will help you.
Get the full URL in PHP & Get current page URL in PHP

image src not loaded when using scheme-less URI

The img is not loaded in :
https://my_nginx_hosted_site_using_SSL/page_containing_img_from_external_source
when replacing
<img src=" http://my_apache_hosted_site_noSSL/files/public/penguins.jpg" >
by
<img src="//my_apache_hosted_site_noSSL/files/public/penguins.jpg" >
Is it not supposed to work fine ?
What can be the reason why it is not ?
Scheme-less URLs use http when called from a http site, and https when called from a https site. That's the point of it. They are not "scheme-less really, you just don't specify the scheme on the page and the browser fills it in as appropriate.
You're server is called my_apache_hosted_site_noSSL in your question so I'm guessing from that name it is not available over https!
Also as the image is not available over https you will not be able to show it on a https page without getting mixed content errors. If you thought using a scheme-less URL was going to protect you from that then you are completely mistaken in your understanding of what scheme-less URLs are and how mixed content works.

HTML image not working

I have a grid of images on my website, but some of the images randomly don't work. All the image sources are links, which are all generated from the same place. I'll show an example, with an image that works and one that doesn't:
http://codepen.io/anon/pen/mJmaZE
As you can see the second image doesn't work, but if you visit the source link the image is there. Why is this happening?
The second image is missing the http:// part. That means, the browser doesn't know it should look at a different server, but tries to access it at the same server, where the HTML file is hosted.
the content of the src attribute is lacking the prefix http:// . when addint it, it displays the image correctly. otherwise, it interprets the URL as a relative URL in the context of the embedding web page.
The syntax of source URL is wrong.
Current syntax
src="steamcommunity-a.akamaihd.net/xx"
This is a relative path which will point to http://codepen.io/anon/pen/mJmaZE/steamcommunity-a.akamaihd.net/xx
Correct syntax
src="http://steamcommunity-a.akamaihd.net/xx"
which will request the intended CDN url.