Is there any method by which I can get url inside <img> tag from a link.
Eg: When I give a link of website, like a website or facebook page, I want to get all urls inside all the img tags in that site --> <*img src="url">
-
3Have you tried anything yet that you can show us?Tushar Gupta– Tushar Gupta2021-09-16 14:17:20 +00:00Commented Sep 16, 2021 at 14:17
-
Does this answer your question? How to get URL of an image in JavaScript?slow– slow2021-09-16 14:18:24 +00:00Commented Sep 16, 2021 at 14:18
-
@Tushar No Bro nothing :(Scania_16– Scania_162021-09-16 14:18:28 +00:00Commented Sep 16, 2021 at 14:18
-
stackoverflow.com/questions/5809051/…ecolema– ecolema2021-09-16 14:20:14 +00:00Commented Sep 16, 2021 at 14:20
-
1Note that img src isn't always a URLControlAltDel– ControlAltDel2021-09-16 14:22:17 +00:00Commented Sep 16, 2021 at 14:22
|
Show 3 more comments
2 Answers
First send a request to a page, get the content and parse it to html. Then get all img tags by using getElementsByTagName method.
For example, if you want to get all img tags on https://jsonplaceholder.typicode.com, your code should be like below.
fetch('https://jsonplaceholder.typicode.com').then(function (response) {
// The API call was successful!
return response.text();
}).then(function (html) {
// Convert the HTML string into a document object
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
var imgTags = doc.getElementsByTagName("img");
console.log(imgTags);
var imgTagArr = [...imgTags];
imgTagArr.forEach(img => console.log(img.src)); //iterate the all img tag srcs
}).catch(function (err) {
// There was an error
console.warn('Something went wrong.', err);
});
Example output:
8 Comments
Scania_16
Let me test it now,I think it should work,I want something like this.Plan in my mind is like this
Scania_16
Bro Iam getting an error in console like Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at google.com. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Scania_16
How can I overcome that Error
Engincan Veske
@Scania_16, Google's server might block your request. You can try it with another url, like jsonplaceholder.typicode.com. I updated the answer, just copy and paste it in console and see the output (like in screenshot below).
Scania_16
Bro That worked fine,But My actual aim was @ Facebook page,it didn't work it's till showing that same Same origin policy error
|
Yup ,
in Html like <img class="pqr" url ="xxxxxxx-yyy"/>
in Js file:
const img =document.querySelector('.pqr')
img.src // <-- this will give the src of the image
2 Comments
Scania_16
No Bro,It Didn't Worked
Wasim Akram Biswas
I read the all comments . And i realized it is happen because of they setup CORS in their server that's way it happening