Question

i have a page where i pull some html from an ajax request and then insert it into a div. the html is getting into the div correctly except that the image isn’t showing up, but the alt text for it is. here is the html:

<div class='fltright'><img src='images/esl.jpg' alt="English as a Second Language"/></div><!-- end fltright --><p><span class='large'>Lorem ipsum dolor sit amet,</span> consectetur adipiscing elit. Cras tempor semper tortor. </p>

is there any reason that the image would not show while the alt text would?

AJAX CODE:

function getData(fileName){
    fileLoc = encodeURI("assets/"+fileName+".html")
    //alert(fileLoc);
    request.onreadystatechange = processData;
    request.open("GET",fileLoc, false);
    request.send();
    //alert(request.readyState);
    //alert(response);
    //alert(request.status);
}
function processData(){
    if (request.readyState==4){
        if (request.status==200){
            try{
                response = request.responseText;
                document.getElementsByClassName('content')[0].innerHTML = response;
            } catch(e){
                alert("Error: " +e.description);
            }
        }
        else{
            alert("An error has occured making the request");
        }
    }
}

Answer 1

I would check that the image is actually viewable in these senarios. A good way to check that is to right click and “View Image…”. that will then ask your browser to specifically just request that image.

If you get Not Found the requested image images/esl.jpg was not found on this server, then your url is incorrect.

If you get Forbidden You don’t have permission to access images/esl.jpg on this server. Then it is a permissions issue. As Endophage said you will then want to set the correct file and directory permissions for the Apache process to be able to view that image.