I am trying to simply load an image on page load.
When i use a simple src it works ok:
<img src="url.png" />
But when I try to load it from my JS It does not load:
<img id="loadImage" src="" />
JS:
var _img = document.getElementById('loadImage');
_img.src = 'url.png';
The url is shown as 'not found'.
I am getting the same error as in this post : What does status=canceled for a resource mean in Chrome Developer Tools?
I cant seem to solve it, Why is that happening.
Why don't you try and save the whole image tag in a variable? This you you are not providing invalid HTML markup like empty src.
Just change your HTML to
<div id="imageholder"></div>
and use this code
$(document).ready(function() {
var image_1 = $('<img src="img/url.png" />');
$("#imageholder").append(image_1);
});
Take this fiddle and try :)
http://jsfiddle.net/aBF67/
NOTE: I'm using jQuery for that example :)
Try yo create a new Image object and assign it to the src attribute. Example:
var imgObj = new Image();
imgObj.src = "http://.....jpg";
var _img = document.getElementById('loadImage');
_img.src = imgObj;
I hope it helps.
Related
I have an image saved to a database by converting to a byte array to a string then i am trying to remake the image on the view. But I wanted to make it for if the image was null(no image upload) that they will get a default "no image" image. But it seems when i try to make an if statement within my view with razor. The img src is not able to find the var in the if statement. The reason i need it to fill the src on the img outside of the if statement is because when i submit the form i need it to send the img data back to the action in the controller to reconvert it and save it on the database.
I trying a view different ways to fix it, the best i can do it make scripts inside my if statement. but it still will not connect to my img src.
<!--Remaking the image from a stromg to a char
array to a byte array to a imagefrom the
database to the original image-->
#if (Model.ImagePath != null)
{
char[] imageChars = Model.ImagePath.ToCharArray();
byte[] imageBytes = imageChars.Select(b => (byte)b).ToArray();
var base64 = Convert.ToBase64String(imageBytes);
var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
<script>
var img = getElementById("ImagePath").src;
img.src = "#imgSrc";
</script>
}
else
{
<script>
var img = getElementById("ImagePath");
img.src = "~/Content/no-image-icon.jpg";
getElementById("ImagePath").width = "100";
getElementById("ImagePath").height = "100";
</script>
}
<img id="ImagePath" alt=""/>
when i inspect the page the script has the image converted back into the right format it just wont send it to the img src.
You have:
<script>
var img = getElementById("ImagePath").src;
img.src = "#imgSrc";
</script>
That looks like it is setting img.src.src, which doesn't make sense. That should probably be this, correct? :
<script>
var img = getElementById("ImagePath");
img.src = "#imgSrc";
</script>
And you could also make sure to remove all line breaks:
<script>
var img = getElementById("ImagePath");
var imgSrc = "#imgSrc";
img.src = imgSrc.replace(/[\r|\n]/gm,'');
</script>
Also, as noted by Divya, your image element should come before your script tags, otherwise when you have getElementById("ImagePath");, it won't be able to find that element, since it has not loaded yet.
I figured it out i made a new vareriable in my model and added the string to it in my action that loads the page then just set that as the img src. Thank you for the help tho!
I have a function where I get the img src value as the parameter, what I want to do is check to see if that image loads with a 200 ok or 404/some other error. If it gets a 200 ok, then I want to inject an img tag with that src into the DOM(I reason that during checking,it also gets loaded into the browser cache and injecting that img tag into the DOM loads it from the cache ). I tried with a simple snippet of code as follows :
function checkImage(src)
{
var img = new Image(),
tag = '<img src="'+src+'" />',
alt = '<span>sorry,image broken</span>';
img.onload = function(){
$('.some-container').html(tag);
};
img.onerror = function(){
$('.some-container').html(alt);
};
img.src = src;
}
It worked fine in chrome, but went havok in firefox and ie(both of them are firing only the error event no matter whether the image loaded fine or broke). Instead of using onload and onerror, I tried it using jquery like :
$(img).load(...).error(...).attr('src',url);
$(img).on('load',...).on('error',...).attr('src',url);
$('<img />').load(...).error(...).attr('src',url);
$('<img />').on('load',...).on('error',...).attr('src',url);
and even tried the jquery.imagesLoaded plugin by desandro(https://github.com/desandro/imagesloaded) like :
$(img).imagesLoaded().done(...).fail(...);
$(img).imagesLoaded().progress(function(instance,image){
image.isLoaded?alert('loaded'):alert('broken');
});
$('<img />').imagesLoaded().done(...).fail(...).attr('src',url);
$('<img />').imagesLoaded().progress(function(instance,image){
image.isLoaded?alert('loaded'):alert('broken');
});
I also tried the solutions from :
jQuery callback on image load (even when the image is cached)
https://groups.google.com/forum/#!topic/jquery-dev/7uarey2lDh8
but as it turns out, works in chrome, but not in FF or IE, is there any solution where I can check for an image which is present in memory but not in the "DOM" ? Thanks in advance.
You have to check for image onload after setting a source to it.
var img = new Image();
//set source to the image
img.src = "set/image/source/path"
img.onload = function(){
//if image load is successful
//create an jQuery object out of this image
var jQimage = $(this);
$('.myContainer').html(jQimage);
}
Also note that jQuery load function cannot guarantee you a cross browser check for image loading as mentioned in jQuery docs
So, the best approach is to check onload with native javascript and create an jQuery object if necessary to make use of jQuery methods.
Have a look at what w3schools has to say about the Image() javascript object.
http://www.w3schools.com/jsref/dom_obj_image.asp
onabort - Loading of an image is interrupted, W3C YES
onerror - An error occurs when loading an image, W3C YES
onload - An image is finished loading, W3C YES
also the complete property of the Image() object, determines if the browser is finished loading an image, Unfortunately this particular property is not W3c
hope that helps a little
PS: After having a little Google search I found this Q/A from Stack overflow.
Cross-browser image onload event handling
I want to create a preview for image before upload it on the server, using JQuery.
My code, js code:
$(function(){
Test = {
UpdatePreview: function(obj){
// if IE < 10 doesn't support FileReader
if(!window.FileReader){
// don't know how to proceed to assign src to image tag
} else {
var reader = new FileReader();
var target = null;
reader.onload = function(e) {
target = e.target || e.srcElement;
$("img").prop("src", target.result);
};
reader.readAsDataURL(obj.files[0]);
}
}
};
});
My html:
<input type='file' name='browse' onchange='Test.UpdatePreview(this)' />
<br/><br/>
<img src="#" alt="test" width="128" height="128" />
See jsfiddle: http://jsfiddle.net/aAuMU/
After onload, I see the src of image (using Google console application) and it looks like:
data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAEKgD/4gv4SUNDX1BST0ZJTEUAAQEAAAvoAAAAAAIAAABtbnRyUkdCIFhZWiAH2QADABsA...
It is a way to get in javascript the base of image and assign to image in case I'm using IE as browser ?
FileReader doesn't work in IE < 10.
If you need it as getting nice effect then you could use flash like they do in
https://github.com/mailru/FileAPI
But when i needed to show image to user because i needed to let user select area for croping then i used form inside hidden iframe and uploaded image to server and sent back image data uri so i was able to get data uri and replace image src attribute, then when area was selected i did not send image back as file but as data uri. In old browsers it means you upload image twice, but i did not want to use flash as in some cases flash may also not be installed there.
LIVE PREVIEW CAN BE DONE IN JQUERY
We need an onchange event to load the image. img tag is given an id = frame, the function UpdatePreview() loads the image immediately after the image or file is selected.
function UpdatePreview(){
$('#frame').attr('src', URL.createObjectURL(event.target.files[0]));
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type='file' name='browse' oninput='UpdatePreview()'/>
<img src="#" id ="frame" alt="test" width="128" height="128" />
Instead of
$("img").prop("src", target.result);
write
$("#ImageId").attr("src", target.result);
Where ImageId is the ID of your img tag.
i am trying to add some images to my facebook tab-app via FBJS.
The Problem:
I can't see the images and I don't know why.
The FBJS code
url = "http://www.domain.de/image.gif";
myImg = document.createElement('img');
myImg.setStyle( {backgroundImage: 'url('+url+')' });
document.getElementById('wrapper').appendChild(myImg);
The rendered html
<img style="background-image: url("http://www.domain.de/image.gif";);">
Try modifying your code like this and specify the src attribute of the image:
url = "http://www.domain.de/image.gif";
myImg = document.createElement('img');
myImg.setSrc(url);
document.getElementById('wrapper').appendChild(myImg);
You're really thing to set the background image of an img element? That seems...odd. Are you sure you don't just want to do a normal img element (Sarfraz may have you covered there if so) or specify the background image of the wrapper element? E.g.:
url = "http://www.domain.de/image.gif";
document.getElementById('wrapper').setStyle( {backgroundImage: 'url('+url+')' });
I've marked this CW because I've never done any FBJS, so could be talking through my hat. :-) If it helps, it helps.
How to display an image using JavaScript from an array creating in JavaScript.
Any help please?
Thanks.
If you've got an image tag in your HTML layout, with a given id, you can control its content with javascript:
function updateFullImage(id, url) {
var img = document.getElementById(id);
img.src = url ;
}
and the browser (FF at leat) will automatically reload your image
You can create an image in JavaScript: var img = new Image(); img.src = "path-to-image"; and then add it to the DOM (depending on if you're using a js library like jQuery or not this will vary in complexity). Can you be more specific as to your circumstances?