getting a webpage's image(s) with javascript - javascript

Is there a way to get an image from an outer webpage with javascript code?
I'll explain:
I have a website, lets say www.one.com, and I want to show in this website's homepage an image that exists in another website, lets say www.two.co.il
Can I do it?

Try this:
var img = document.createElement("img");
img.src = "http://www.two.co.il/image.jpg";
document.body.appendChild(img);

A convenient thing is to create first a placeholder in your HTML:
<div id='externalImage'></div>
because it will not disrupt the function if the layout changes and allows precise placement.
As for the real question on how you put an image, assuming from the tags that you use Jquery:
$("#externalImage").html("<img src=\"http://put.url.here/image.jpg\" />");
if you want to insert it into the aforementioned placeholder. Otherwise to plainly add the image to the document you can append it to the documentd BODY or elsewhere using document.body.appendChild like in the other answers.

Yes.
var image = document.createElement('img');
image.setAttribute('src', 'http://www.two.co.il/foo.jpeg');
image.setAttribute('alt', 'something suitable');
document.body.appendChild(image);
So long as you aren't trying to get content from the other site into JS (you aren't, you are create an img element in the DOM, JS has no further involvement), you won't run into the Same Origin Policy.

or simply:
$("<img src='" + imgUrl + "' alt='" + altText + "'>").appendTo("body");

make a div and give id = "div1" with height and width
<div id='div1' height='100' width='100'></div>
$('#div1').css('background-image, 'http://www.two.co.il/urImage.jpg');
it is shortest way to apply image

Related

Setting the img src to be the img src on another website based on img id

Is it possible to get the img src from a completely different web page if you have the img ID and then use that as the img src on your own website?
That way, when the image changes on that other website, it will also change on yours.
So, for example, on www.abcdefg.com/1234567/ there is an image.
The img id for the image in question is "image-tag"
I would like to be able to get the src of that image by using the img id (image-tag) and use it as the img src on my own web page.
$link = 'http://www.bamuel.com/';
$content = file_get_contents($link);
$first_step = explode( '<img id="epic article">' , $content );
$second_step = explode("</img>" , $first_step[1] );
echo $second_step[0];
You can possibly able todo it in PHP
It does not go that way.
Let's say your desired id is
id = "image-tag"
and src = "http://www.abcdefg.com/1234567.png"
you wish the line would look like this:
<img id="image-tag">
For it to get the source(src),
You could do this with JavaScript:
var image_tag = document.getElementsByTagName('img')
var attr_val = image_tag.getAttribute('id')
if (attr_val == 'image-tag'){
attr_val.src = "http://www.abcdefg.com/1234567.png";
}
This way, from your example, whenever you declare any img with id = "image-tag", the source will automatically be referenced to the site as required.
No, it is not possible.
CORS prevent you from sending an ajax request to fetch HTML from a different origin, but it is possible to fetch the other website from a server and extracts the image tag to get the image src.

(Jquery) Get background-image path from load[ed]() HTML element style

I'm working on my company's webpage. This is my first serious webpage and lots of doubts came at each line. Now I'm working on a News loading system, and I've one that can't solve:
I'm loading my news with jquery load, attaching elements to previously defined vars:
var newArticle = $('<div id="news-article"></div>');
var newArticleChild = newArticle.children(); //'cause i want to load articles inside #news-article, not <a></a>
var image = $('<div></div>');
var title = $("<div></div>");
var tag = $("<div></div>");
$(image).load(path + i + ".html #main-image");
$(title).load(path + i + ".html h1");
$(tag).load(path + i + ".html #tag");
$("#news").append(newArticle); //Apend articles parent to an existing page element
newArticleChild.append(image);
newArticleChild.append(title);
newArticleChild.append(tag);
HTML --------------
<div id="main-image" style="background-image: url(../../assets/images/NewsBackgroundTry.png);
"></div>
I don't really like this because it creates emty divs with another div inside, but this is not a mistake itself.
I don't really need to append image to my page, because what i want from it is it's style, that contains the path to the image in css. I'm doing this this way because I need to apply background-size: cover; style to that image.
My question is, how i can get the background-image style from image variable? I've tried lots of things and looked at as many posts as i found about it, but i can't get this value...
If the solution prevents from appending image to page, it would be much better.
Thanks everyone, Abel!
you could use var bgImg = image.css('background-image'); to get that css property and then replace the nasty url('') part to get just the image path.

Get image src without loading the image?

I have a html snippet being returned through ajax. The snippet is an <img> tag.
<img src="image.jpg" />
I need to extract the value of the src attribute without loading the image initially. The reason for this is the src attribute contains a partial path that I need to manipulate in my app to load the image properly.
I have the following code currently extracting the src attribute:
var src = $(value).attr('src');
However, this causes the image to load, resulting in a 404. I would like to avoid this unnecessary request.
How can I extract the value of the src attribute without causing the browser to load the image?
I solved this by changing the name of the src attribute before loading it into jquery.
value = value.replace('src', 'data-src');
var src = $(value).attr('data-src');
Doing this allows me to extract the value without causing the browser to attempt to load the images.
Your best bet is probably to output a data tag on the image. You can then manipulate this using jQuery and then use it to write the final image path.
So you'd do something like this in your HTML:
<img data-img-src="abc.jpg" class="my-image" />
Then in your jQuery:
var path = $('.my-image').data('img-src');
console.log(path); // Do something here, then write the new path with:
$('.my-image).attr('src', new_path);
EDIT: Sorry I just re-read the bit where it's coming via AJAX. In that case, you can probably use the data callback of your ajax request to strip the src from the image.
$.ajax('someURL.html', function(data){
var html = data.replace(/\ssrc/g, ' data-src'),
img = $(html),
src = 'some/path/' + img.data('src');
img.attr('src', src);
$('#container').append(img);
});
If you just have the string , like <img src="image.jpg" /> why dont you go for regex?
Something like: /[\"\'][a-z0-9A-Z\.]*/.
PS:My regex skills are poor,so you could manipulate it accordingly.
Use
var string = '<img src="image.png">';
var matches = string.match(/src\=("|')(.*?)\1/);
console.log(matches[2]);
You can simply remove the attribute after accessing it.
This will not load the invalid image, as you can confirm in your console:
var s= $('<img src="invalidURL.jpg">'),
src= s.attr('src');
s.removeAttr('src');
console.log(src);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Remove removeAttr(), and it will attempt to load the image.

javascript replace img src with full img url

ok so I have a JSON feed which for some reason gives some images like
img src=\"..\/..\/upload\/Politcis\/Tony-Abbott.jpg\" alt=\"Tony-Abbott.jpg\" width=\"980\" height=\"653\" align=\"left\" \/>
full JSON string http://media.queerdio.com/mobileDevice/?uri=loadstory/high-court-to-decide-on-act-marriage-law
What I would like to know if how can I with javascript replace the img src with the full img src.
for this image according to there API the full img src should be.
http://media.queerdio.com/news/upload/Politcis/Tony-Abbott.jpg
what I know if I would have to first get the src link, and split it at the beginning of upload
then I would need a var linking to http://media.queerdio.com/news/
then I would add the upload and the rest of the src link to it, then replace the img src.
so I understand the basics of what I want to do but note 100% sure how to do what i need.
Here is the pseudo code in case your site already has jQuery:
var htmlFromJson; //you json object
var imgHost = 'http://media.queerdio.com/news/';
$(htmlFromJson).find('img').each( //find the img from the JSON str
function(){
var newSrc = imgHost + $(this).attr('src'); //access add custom host in img src
newSrc = fixUrl(newSrc); //remember to replace the ../ & parent folder name
$(this).attr('src', newSrc); // update the
}
);
Hope I can help you. PS: if you somewhere mis-understand, let me know, I try to solve.

Incorporating a javascript variable in a file path

I am developing a page to display an image, dependent on what the user has previously chosen from a menu. The name of the .jpg is passed in as a parameter ('photo') on the URL and I have been able to parse this as a global variable (myphoto). The .jpgs are all held in one folder.
I now need to do something like (I guess) quoting the image source as being
"myfolder/"+<script>document.write(myphoto)</script>
but this is not working. Any ideas please?
(Image tag changed here to get round the anti-spam.)
BTW all client-side javascript. It's been a few years since I've used this!
You can do the opposite and output the whole image tag in javascript:
<script language="javascript">
document.write('<img src="myfolder/' + myphoto + '" />')'
</script>
It's not working because when the browser sees this line: <img src="myfolder/"+<script>document.write(myphoto)</script>, it's treating the + character as a character and not an operator.
You will need to programmatically set the src of the image. Something like this:
document.getElementById("myImage").src = "myfolder/" + myphoto;
or with jQuery:
$("#myImage").attr("src", "myfolder/" + myphoto);
document.getElementById("imgtagid").src = "your image folder/" + selectedPhoto

Categories