CODEWITHSUNDEEP
javascriptjqueryhtmlimagecordova
Hartley
Hartley

Reputation: 69

Images not loading - PhoneGap

I am programatically adding images to my html. In Firefox, the images are loading fine. But in android on all the devices I test on, no images will appear. It just shows their alt in a box.

HTML:

<div class="ui-popup-container fade in" id="popupPhoto-popup" tabindex="0">
        <div data-role="popup" id="popupPhoto" data-overlay-theme="a" data-theme="d" data-corners="false" class="ui-popup ui-body-d ui-overlay-shadow" aria-disabled="false" data-disabled="false" data-shadow="true" data-transition="none" data-position-to="origin">
            <!-- insert images here -->
        </div>
    </div>
<div class="ui-screen-hidden ui-popup-screen" id="popupCloseRight-screen"></div>

JS:

//shows images upon clicking part in table
function tableSelect(location){
//remove previous images
$("#popupPhoto").text("");
//if image was added or not
var boolean = false;
//splits part names
var part = $("#table"+location).text().split(" ");
//part[0] always empty
for(var i=1;i<part.length;i++){                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
    //so 11 works
    if(part[i] == "11"){
        part[i]="OO";
    }
    //runs through every name in imagedir to see if image exists
    for(var j=0;j<imagedir.length;j++){
        //check if single image
        if(part[i] == imagedir[j]){
            $("#popupPhoto").append($("<img>", {src: 'images/gradegeoImages/'+part[i]+'.png', "class": 'popphoto', alt: part[i] }));
            boolean = true;
            break;
        //checks if double image
        }else if(part[i].concat("1") == imagedir[j]){
            $("#popupPhoto").append($("<img>", {src: 'images/gradegeoImages/'+part[i]+'1.png', "class": 'popphoto', alt: part[i].concat("1") }));
            $("#popupPhoto").append($("<img>", {src: 'images/gradegeoImages/'+part[i]+'2.png', "class": 'popphoto', alt: part[i].concat("2") }));
            boolean = true;
            break;
        }
    }
    //if no images, display "No information available"
    if(boolean == false){
        $("#popupPhoto").append($("<div>", {text: 'No information availabe for '+gradegeo+' of '+part[i]}));
    }
}
//show images
$("#popupPhoto").addClass("ui-popup-active");

}

Upvotes: 0

Views: 1129

Answers (1)

Hartley
Hartley

Reputation: 69

I found out that when I called for my image in the image path, part[i]'s value was in capital letters, while the image names were in lowercase. After I figured this out I felt incredibly stupid... Apparently firefox doesn't care whether your images are case sensitive or not, because they were working on there during the debugging process.

Upvotes: 1

Related Questions