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">
Related
I know I can add images to a html file by the following syntax
<img src="*****">
But my question is can i copy any images link from the web and add them to my html file?
i'm not talking about the copyright laws regarding this, just, can every image link be used as the image source in html?
I was writing a code in codepen where i embedded a link to an image from devianart, but the image didn't show up.
I think it depends to the website policy; Some websites don't let you to use their hosted images in your webpage, and some others do.
this is what i find on W3schools:
Definition and Usage:
The required src attribute specifies the URL of the image.
Note: When a web page loads; it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
The URL of the image.
Possible values:
An absolute URL - points to another web site (like
src="http://www.example.com/image.gif")
A relative URL - points to a file within a web site (like
src="image.gif")
Hope this is helpful :)
make sure image fully open in your browser tab/
i also check it but it work in codepen may be you doing something wrong first need to write clear what you want
try this image tag in codepen
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 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
I have HTML content (mostly e-mails) that I would like to display in an archive. Seeing as some of these records contain their own styles, images, and headers, they need to be displayed independently and confined to its container so as not to interfere with the page displaying it. I immediately thought of an iframe.
I have two ways I can do this, both are somewhat indirect. 1) I can draw an iframe that points to about:blank and use Javascript to draw the content into the iframe after the page loads. 2) I can create a secondary PHP page that returns only the content of the e-mail and point the iframe to it as the src attribute. These solutions are simple enough, but I was wondering if there is a more direct way.
I found solutions like these, but they suggest using options 1 or 2 above. The point of this question is: "Is there a more direct way to preload HTML content directly into an iframe than to rely on Javascript or a secondary page?"
Html code as IFRAME source rather than a URL
Specifying content of an iframe instead of the src to a page
I am not sure how much more "direct" you can get than to specify a page in the src attribute of the iframe.
You already link to the only answer that actually works in your question that does not include using a src page or using EMCAScript to draw the iframe content. Remember thought that data urls are still limited in the number of bytes of data they can display in most browsers because there are limits to the length of the data url itself.
I would really suggest that you use the src attribute with a seperate backend script as that will decouple and increase the maintainability of your code as you can develop the scripts responsible for the page itself seperatly from those that show the iframe content.
How can I make an iframe that will display only part of the iframes' webpage?
Lets take youtube for example.
How can an iframe display only the youtube video player?
Thanks,
Oded
This is impossible: An iframe will always show the full document. The Same Origin Policy will prevent you from taking a part out of it.
The only workaround would be to fetch Youtube's HTML data from your server (using a server side language), then translate all relative references contained in the page, and output it as if it were a page on your server. You could then isolate specific elements from it because you're in the context of your own domain. This is called setting up a server side proxy.
However, this is a highly imperfect and tough process, and almost (sometimes completely) impossible to get right without breaking stuff, especially with JavaScript and Video. Plus it's most likely illegal, at least in the case of YouTube.
If you're looking specifically for YouTube, you could just fetch the embed code dynamically for the video you're after and display it that way. If you're looking for a general solution, you're in for a long session with the HTML for the target site. If you figure out that your content is all within a <div id='content-you-want'>, for example, then you could do something like:
$.get('proxy.php?url=' + urlEncode("http://my-target-url.com"), function(result_data) {
$("#target-element").html($(result_data).find("#content-you-want").html());
}
if you're using jQuery. But there's still a load of work to be done if the stuff you want isn't conveniently all wrapped up in a div with an id. And you'll need proxy.php to beat the same origin policy.