Mavia Mavia - 5 days ago 4
HTML Question

i need to change the image when return null to temp image

im loading an image path from DB and and i want to handle if null picture to show temp image, im using the following code, and unfortunately its not working,
can anyone fix this or provide me with a new solution ?

echo ' <img src=" '. $row['log_image'] .' " id="logImage"/>';


and the script to handle the temp image

$(document).ready(function () {
var logSrc = $('#logImage').attr('src');
if (logSrc == null || logSrc == "") {
$('#logImage').attr('src', '/images/temp_logbook.JPG');
}
});

Answer

An error event gets raised on an img element when the src is invalid, or cannot be loaded. You can then hook to that element and change the src to your temp version, like this:

$('#logImage').on('error', function() {
    $(this).prop('src', '/images/temp_logbook.JPG');
});

Note jQuery v3 removed the error() method, so you need to use on('error', fn) as above.

Working example