I need to display the image but I can only provide the link of the image which is generated.
and I need JavaScript to fetch that link and display that image instead of displaying the image link.
Assuming you already have the image url in a variable, you can use the following code:
img = new Image();
img.src = your_url;
element.appendChild(img); // where element is a DOM element - as returned by document.getElementById()
Related
I am trying to create image thumbnail inside my table row and hence created img element. However , it gives the url of the image source with url encoding. for eg it appears as:
file:///Users/codeFolder/images%E2%81%A9/square-small%E2%81%A9/00001.jpg
How do I make it show without any encodings and keeping the Javascript file simple?
var imgCell=tr.insertCell(0);
//append thumbnail image source
var img = document.createElement('img');
img.src = "images/square-small/"+ImageFileName+".jpg";
imgCell.appendChild(img);
If someone uploads an image with a <input type="file"/>, there are a million different ways to add the image somewhere as an <img> element or onto a <canvas>. I want to instead add it as an <image> element in an SVG and I'm totally stymied.
If I add the uploaded file to a canvas and use canvas.getDataURL(), I get a valid data URL that I can use as a background image or whatever. But setting the xlink:href of an <image> element to that URL does nothing. I've also tried adding the file directly without the canvas step, e.g.:
$("#file").on("change",function(){
$("image").attr("xlink:href",this.files[0]);
});
That seems to do something but still the image won't display. I have a width and height set on it. I've also tried various Blob URL methods and those all don't do anything.
How can I take the image file from a file input and display it as an <image> element in an SVG?
Any assistance much appreciated.
The this.files[0] returns a File object. The xlink:href attribute assigment takes string. The automatic conversion of File object to string results in the attribute being assigned the string "[object File]".
You could read the file as a data URL and then assign the data URL to the href attribute. As mentioned in comment by Robert Longson, using JQuery with SVG attribute requiring namespace can sometimes cause problems. I would suggest setting attribute using plain DOM. For example...
var xlinkNS = "http://www.w3.org/1999/xlink";
$("#file").on("change",function(){
var reader = new FileReader();
reader.onload = function (e) {
$("image")[0].setAttributeNS(xlinkNS, "href", e.target.result);
};
reader.readAsDataURL(this.files[0])
});
I am using a content script in my chrome extension that gets the src attributes (from several images from the user's active tab) in order to display them in my popup HTML file that is displayed when a browser action is clicked. Certain images that I need to display use src values that are paths to local files.
Example:
src = "/image/17_x.px?wid=450&hei=500&bgcolor=xxx...etc"
the src starts with a "/", has a brief identifier denoted by "17_x", followed by various attributes of the image. Also itemprop = "image" is set on these image elements. The "xxxx...etc" is just showing that other attributes and values are listed in the src
When I create a new image element with this "local" src, the desired image is not displayed in my popup html file. Is there another way that I can use this image data to display the image within my extension?
Cause: element.getAttribute("src") or $(...).attr("src") return the original html markup.
Solution: use DOM property instead element.src or $(...)[0].src to return a full URL.
I want to display the broken image (link) icon for certain objects on a page. I assumed since most browsers have their own way of showing that a link is broken, that it might be something native that can be called? Is there anyway to force it to display using JS/CSS?
Reference:
http://sitesbyjoe.com/posts/detail/2012/03/15/make-firefox-show-broken-images
Clarification:
I know I can just overlay the div with a tag with broken src, but I'm looking for a CSS/JS solution.
Sample:
<div id="someid" style="background-image:url('someurlthatdoesntexist')"
</div>
Save yourself a GET by using a dataURI
JavaScript;
var img = new Image(); // or document.createElement('img');
img.src = 'data:image/jpg,'; // data URI that will produce error
document.body.appendChild(img); // and append, for example
HTML;
<img src="data:image/jpg," />
PLAIN HTML
<img src="idontexist.jpg"/>
I am creating a Domino Document via AJAX that contains a photo.
I am able to get the base64 image data back to the server in a Notes Domino Document.
Data is stored in a Richtext (textarea) field as
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAFA..........." - (this goes on for several lines)
I am trying to display on the Domino Webpage using passthru tag
<<image id= "pic1" >>
in the onLoad event of the Form i try to shove the data into the image element using this code:
//Photo Stuff
alert(document.forms[0].photo1.value);
document.getElementById("pic1").src = document.forms[0].photo1.value;
The alert is showing the data.
Picture is not appearing.
Please help.
Thanks
Mike
I was under the impression that inline images were possible using a data URI.
Like:
<img src="data:image/png;base64,
Your base 64 source. . . "/>
Or
document.getElementById("pic1").src =
'data:image/png;base64,' + document.forms[0].photo1.value;
Edit: tested... here's a jsFiddle:
http://www.jsfiddle.net/UySAb/1/
Mozilla's information on this: https://developer.mozilla.org/en/The_data_URL_scheme
Note: Josiah in his comments is correct as well, your target tag needs to be img, not image.
You can just create an Image object and put the base64 as its src, including the data:image... part like this:
var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);
It's what they call "Data URIs" and here's the compatibility table for inner peace.