What are differences and consequences (both good and bad) of using either data-src or src attribute of img tag? Can I achieve the same results using both? If so, when should be used each of them?
The attributes src and data-src have nothing in common, except that they are both allowed by HTML5 CR and they both contain the letters src. Everything else is different.
The src attribute is defined in HTML specs, and it has a functional meaning.
The data-src attribute is just one of the infinite set of data-* attributes, which have no defined meaning but can be used to include invisible data in an element, for use in scripting (or styling).
If you want the image to load and display a particular image, then use .src to load that image URL.
If you want a piece of meta data (on any tag) that can contain a URL, then use data-src or any data-xxx that you want to select.
MDN documentation on data-xxxx attributes: https://developer.mozilla.org/en-US/docs/DOM/element.dataset
Example of src on an image tag where the image loads the JPEG for you and displays it:
<img id="myImage" src="http://mydomain.com/foo.jpg">
<script>
var imageUrl = document.getElementById("myImage").src;
</script>
Example of 'data-src' on a non-image tag where the image is not loaded yet - it's just a piece of meta data on the div tag:
<div id="myDiv" data-src="http://mydomain.com/foo.jpg">
<script>
// in all browsers
var imageUrl = document.getElementById("myDiv").getAttribute("data-src");
// or in modern browsers
var imageUrl = document.getElementById("myDiv").dataset.src;
</script>
Example of data-src on an image tag used as a place to store the URL of an alternate image:
<img id="myImage" src="http://mydomain.com/foo.jpg" data-src="http://mydomain.com/foo.jpg">
<script>
var item = document.getElementById("myImage");
// switch the image to the URL specified in data-src
item.src = item.dataset.src;
</script>
The first <img /> is invalid - src is a required attribute. data-src is an attribute than can be leveraged by, say, JavaScript, but has no presentational meaning.
src will render the value immediately and it’s the default for images, videos using a single source and iframes.
data-src is used when lazy loading to prevent the default image from loading when the page loads. Most lazy loading libraries will use intersection observer and copy the data-src value to src when it’s time to load the image.
As the accepted answer says. If you're looking for the usage of data-src lazysizes is a popular one.
Well the data src attribute is just used for binding data for example ASP.NET ...
W3School src attribute
MSDN datasrc attribute
Related
I was wondering if we could use Unicode images in the src attribute of img tag instead of a path. Will the browser be able to identify the code?
No. Images need to be images, not characters from a font.
The value assigned to src needs to be the URL to an image. It can't be some text. It can't be the URL to a font.
That's DataURI. Demo
<img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" alt="star">
Here is a document.
Is there a ('newbie-simple') way to embed an image inside html, however not in the inline form as usual:
<img src="data:image/png;base64,iVBORw0KGgoAAAA [...]" />
but in a form where the base64 code is placed on the end of the html file?
A possible benefit of this method would be that an image can be inserted in the page on more than one place using the same image data from the bottom of the html file.
TL;DR: With pure HTML/CSS - unfortunately no.
I need that too for Sciter Notes project to save notes (plain HTML files) with embedded images.
Ideally you should be able to do something like this:
<img src="cid:1234" />
...
<data id=1234 type="image/png" base64>
iVBORw0KGgoAAAA...
</data>
but unfortunately no such mechanism yet.
But you can implement schema explained above with script though.
If you are using HTML5, then you do not have to worry about caches. The browser will load all images and store them into an image-list, therefore the image will be loaded only once and reused at every place the key (the URL to the source image) is found.
The only thing you will have to do, if you are only using HTML, is to copy the URL of the image into every place you need to use it. This is necessary, because you cannot declare variables in HTML and hence cannot change them from another place in the document. For this purpose you would need additionally javascript for example.
Then you can go ahead with CSS to adjust the pictures to your requirements. Yu can either define classes in the header and let the img tags have these classes, or you can type the style properties inline or you can import an external CSS-file.
EDIT:
An example with javascript would be to add this code in
<body>
<img id="img" src="myIMG.jpg">
<script type="text/javascript">
function changeImage(id, src) {
document.getElementById(id).src=a;
}
</script>
</body>
Here the function changeImage is declared now. You can call this function either via onclick or inside of the script tag. You can address the correct image through its ID as first parameter (you will have to give every image its ID, don't confuse it with the image-list of your browser, here you define the ID in the img-tag) and the new source url as second parameter.
I do not see title listed as an attribute for html <img> on sitepoint or mdn, or even on w3.org, yet it is widely used, and compatible in most browsers. I want to know if this is indeed a valid img attribute?
If so, why is it not listed on those sites. If not, why is it so widely used, and should I use it or no?
Yes, title is a global attribute: http://www.w3.org/TR/html5/dom.html#the-title-attribute
The title attribute represents advisory information for the element, such as would be appropriate for a tooltip. On a link, this could be the title or a description of the target resource; on an image, it could be the image credit or a description of the image; on a paragraph, it could be a footnote or commentary on the text; on a citation, it could be furtherinformation about the source; on interactive content, it could be a label for, or instructions for, use of the element; and so forth. The value is text.
Attributes are listed in the specification:
http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
Content attributes:
Global attributes
alt - Replacement text for use when images are not available
src - Address of the resource
crossorigin - How the element handles crossorigin requests
usemap - Name of image map to use
ismap - Whether the image is a server-side image map
width - Horizontal dimension
height - Vertical dimension
Yes it is, look here for example:
< http://www.w3.org/TR/html5/dom.html#the-title-attribute>
title is a global attribute, which means that it can be used on any element.
The title attribute is more like meta information on various types of HTML tags. There is no harm in not having it, but if present, it can be used in anyway you want either in Javascript/ any DOM parsing.
Check the usage of it this W3 schools - TryIt! with the ID myAbbr
I have html code in which image tag is used.. I want to get the src of image ..
One idea is that...i split that code :
var temp=htmlContent.split("<img src='")[1];
var imageURL=temp.split("'")[0];
but There is no gurantee that src would be the first attribute of img tag....like this
<img alt="image" src="url"/>
So please give me some feasible solution for Google Apps Script
// parses implicitly as "<html><body><img alt='alt' src='source!'></body></html>"
Xml.parse("<img alt='alt' src='source!'>", true).getElement()
.getElements()[0] // descend into <html>
.getElements()[0] // descend into <body>
.getAttribute('src').getValue(); // get the value of the 'src' attribute
To explain, Xml.parse with the second param as true parses the text as a lenient HTML document. It implicitly adds an <html> tag and a <body> tag which you need to descend into with the .getElements()[0].getElements()[0] calls. Then you are at the <img> tag and you can examine its src attribute without worrying about where it is in the tag.
I'm actually needing to include html links in the longdesc attribute. I've altered prettyphoto to use longdesc instead of title for images, but I need to include html links in those descriptions. I know it's possible with code for characters, I just don't remember what those are.
Thanks
This can be done with the longdesc attribute:
<img src="theimage.png" longdesc="thedescription.html" />
And then, in thedescription.html:
Link
One alternative way to do this is by using an OBJECT element, as follows:
<OBJECT data="theimage.png" type="image/png">
Link
</OBJECT>
Also, since you asked for it, here is how to convert html entities automatically in jquery:
$('<div/>').text('Some Link').html();
// the above evaluates to <a href="link.html">Some Link</a>
I'm not sure if this is what you're looking for, but you can use Walter Zorn's wz_tooltip to show a tooltip with any kind of content.
And example of use:
<img src="theimage.png" onmouseover="Tip('<a href=\'http://test.com/\'>Link</a>');" onmouseout="UnTip();">
The longdesc attribute is an URI, not a place to add code. In other words, you'll need to create a page that the longdesc links to. This page is where you'll make a thorough description of what's on the image.
Are you looking for the html entities?
If so, these are what you are looking for:
> = >
< = <
" = "
' = '