Question

In my application (asp.net) I have an image control which by default has an empty source. When a user clicks on a thumbnail, the clicked image is opened in that image control. The thing is that the images that can be viewed is uploaded by the user, and by that reason I can’t set a default image (because it’s not for sure that an image exists when the page is loaded).

The problem is that because the image src is empty when loading the page, a broken image link is displayed. When a thumbnail is clicked everything works fine.

One solution of this that I came up with is using jQuery to check if the image has an empty src, and if so hide it.

Below is the code that i’ve written for that, but by some reason nothing happens. What can be wrong (the code is loaded when a GET is done by the page)?

if ($("#fullSizeImage").attr(src="") == true) {
    $("#fullSizeImage").hide();
}
else {
    $("#fullSizeImage").show();
}

HTML:

<div id="fullImageArea"> 
    <img id="fullSizeImage" src="" /> 
</div>

Answer 1

your validation should be like:

if ($("#fullSizeImage").attr('src') == "") {

And that’s because your using .attr() the wrong way, according to jQuery’s documentation: you can use .attr() the following ways:

.attr( attributeName ) 

Description: Get the value of an attribute for the first element in the set of matched elements.

Or

.attr( attributeName, value ) 

Description: Set one or more attributes for the set of matched elements.