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.
Related
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 am attempting to display a traffic light image by referencing its source using the 'src' attribute but when ever I try to run it, it just displays the alt heading.
<!DOCTYPE html>
<html>
<body>
<img src = "Pictures/Computing/Question3Images/red_light1.jpg" alt = "Traffic light 1">
</body>
</html>
This is the little extract of what I have got so far but it is only displaying the alt heading "Traffic light 1". I am new to this coding and so am aware that it is most likely not what it needs to be but can anyone please tell me what I have done wrong or what I need to add.
Thanks
probably the image does not exists in the path you have defined, thats why the browser displayed the value which is in 'alt' attribute of 'img' tag .
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
I used DOM in order to extract all HREF-s from given html source. But, there's a problem: If i have link like this one:
<LINK rel="alternate" TYPE="application/rss+xml" TITLE="ES: Glavni RSS feed" HREF="/rss.xml">
then "href" element will be presented as /rss.xml, although that "/rss.xml" is just anchor text. Clicking on that link from Chrome's page source view, real link is opened.
I would like to take that href-s LINK, not anchor text. Please, how can i do it with dom?
Get a hold of the link element and get its href property. Suppose you were using an id,
<link id="myLink" rel="alternate" href="/rss.xml" />
var link = document.getElementById("myLink");
link.href; // http://www.example.com/rss.xml
"href" element will be presented as /rss.xml
Yes, that is the value of the attribute
although that "/rss.xml" is just anchor text.
No. <link> elements don't have anchor text. In the following example 'bar' is anchor text.
bar
Clicking on that link from Chrome's page source view, real link is opened.
Browsers know how to resolve relative URIs.
I would like to take that href-s LINK, not anchor text. Please, how can i do it with dom?
You can't use DOM to resolve a URI. You use DOM to get the value of the attribute and then use something else to resolve it as a relative URI.
The article Using and interpreting relative URLs explains how they work, and there are tools that can help resolve them.
You need to know the base URI that the relative URI is relative to (normally the URI of the document containing the link, but things like the base element can throw that off)
In Perl you might:
#!/usr/bin/perl
use strict;
use warnings;
use URI;
my $str = '/rss.xml';
my $base_uri = 'http://example.com/page/with/link/to/rss.xml';
print URI->new_abs( $str, $base_uri );
Which gives:
http://example.com/rss.xml
You can try using document.location.href to get the current URL and append the result you are getting from your example. That should give you an absolute path for the link.
i want to have a link in frame a and open in frame b without opening new window.
heres my code:
<html>
<base target="main.htm">
<body>
<body link="blue" vlink="rgb(255,200,0)" alink="green" style="background-color:rgb(255,30,15)">
<h2><b>ΠΕΡΙΕΧΟΜΕΝΑ</b></h2>
ΠΡΟΣΩΠΙΚΑ ΣΤΟΙΧΕΙΑ <br/>
<body/>
<html/>
Firstly I would suggest a valid doctype declaration, unless of course you're going for HTML5.
Secondly, I would suggest your enclose your <base> tag inside <head></head> tag
Thirdly, if you're using either XHTML or HTML 5 (as it seems you're currently doing), you will need to close your <base> tag with </base>
As for answering your actual question, you'll need to use the target attribute, as follows:
<base target="main.htm" target="_parent">
Please note that, as far as I know you can't have a link from Frame A open in Frame B, unless it's a parent frame - if you understand what I mean. To get a full understanding of what the target attribute does, check out this link.