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.
Related
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">
I am wondering if someone can help me with a problem I am encountering with iPhone/iPad. I have an email the generates a report as an HTML attachment. In that HTML attachment, there are two images. One is a static image that pulls down a logo using a normal HTML img tag.
The other is dynamic. It also uses the normal HTML img tag, however it calls out to a web api with some information identifying the user.
<img src="http://MyApiServerName.com/api/User/{id}/{OtherParm}" >
The Web API uses information on the user to return appropriate images to them. For some reason the dynamic image does not show up with the attachment is opened on an iPad/iPhone.
The image works just fine when the attachment is opened from a computer. I thought maybe something might be blocking images, however then I would expect the static image not to display as well. I verified that the "Load Remote Images" setting is turned on.
I am at a loss here. Is there something with iOS that prevents dynamically generated images from showing in HTML attachments?
Thanks
Ok, I can't explain why the above is not working, but I did find something that does. Instead of using the following URL
<img src="http://MyApiServerName.com/api/User/{id}/{OtherParm}" >
use
<img src="http://MyApiServerName.com/api/User/{id}/{OtherParm.jpg}/" >
The final param needs to end with ".jpg/". If the slash is not there, you will get a 404 error.
Then in the API method, you simply strip off the .jpg part of "OtherParm" to get the intended value for "OtherParm".
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.
All:
When I try to solve the problem that when load image from cache, I got some answers from this post:How to force a web browser NOT to cache images
It talks about add a timestamp to the src like
<img src="picture.jpg?1222259157.415" alt="">
But in my case, it is not a direct image url, it is avatar url from github like:
<img src="https://avatars.githubusercontent.com/u/614?v=3" alt="">
When I add a timestamp 79399.92599998368 to it, it becomes:
<img src="https://avatars.githubusercontent.com/u/614?v=379399.92599998368" alt="">
I wonder why this src can still be correctly recognized and get the image even the url changed? Could anyone tell me why this works and how browser deal with this?
Thanks
A question mark (?) in a URL separates location and a query string, listing GET arguments.
In this case, github simply ignores those arguments and serves the image identified by the location part. In other words, github just looks at the first part and thus always serves the same content, but a user's browser obviously cannot predict this, thus needs to always load the content if the whole URL doesn't exactly fit the cached one.
I have a WordPress custom page that has the following image coded in it (CSS in another file applied to a class of this image, just shortening the story here):
<img src='wp-content/themes/MyTheme/images/someimage.png' style='display: none;' />
Once I upload everything on the server it all works fine. However, after a while I can see that the source of that image changed to something like this:
<img src="data:image/png;base64,iVBORw0KGgo...uQmCC" style="display: none;">
This is a huge problem as (long story short) I need to have that image loaded on the page not as a data URI scheme but a regular source link so it is correctly displayed if certain events on the page happen (it works fine before the src is changed and it doesn't after).
Since data URI scheme is new to me how can I prevent it from happening and have the regular source link always displayed? (mind you, at this point I'm not sure whether the WordPress is responsible for it or the server itself)
Any tips would be greatly appreciated, thanks!
It's possible that you have PageSpeed modules enabled that are doing this on your website. Had similar issues before.
You can enable and disable modules by using an htaccess file at the root
of the website using flag to set your preferences. This page explains
how:
https://developers.google.com/speed/pagespeed/module/filters