指定url的图像是否为null

Question

I am designing a site that displays the icon of any song, on the server. I have created a php file that returns the image of the song, if it exists. My code in HTML:

<img src="/image.php?song=SongName" width="100" height="100">

If the given song has a cover icon, then the img element shows the icon. If it doesn't, I get an empty 100x100 img box.

Now, I want to specify in javascript, if the url address: '/image.php?song=SongName' returns null (if there is not an image cover on the song), in order to hide the img. How to achieve it?

Thanks.

PS. The code I've tried so far (there's a bit of php for the img url formation):

var picElement = document.getElementById("picture");
picElement.src = "/image.php?song=$nameFile";
if(picElement.src == null){
    picElement.style.display = "none";
}else if(picElement.src !=null){
    picElement.src = "/image.php?song=$nameFile";
    picElement.style.height = "20vh";
    picElement.style.width = "20vh";
    picElement.style["boxShadow"] = "3px 3px 10px 1px #e2b674";
}

The php code under image.php:

<?PHP
$song= $_GET["song"];
require_once("getID3-1.9.15/getid3/getid3.php");
$Path= .$song.".mp3";

$getID3 = new getID3;
$OldThisFileInfo = $getID3->analyze($Path);
if(isset($OldThisFileInfo['comments']['picture'][0]))
{
    header('Content-Type: ' . $OldThisFileInfo['comments']['picture'][0]['image_mime']);
    echo $OldThisFileInfo['comments']['picture'][0]['data'];
    die;
}?>

Answer 1

If you want to handle displaying the default image using only markup, you can add an attribute onerror="this.src='/image.php?song=Default'" or similar to each image:

<img src="/image.php?song=SongName" onerror="this.src='/image.php?song=Default'" width="100" height="100"/>

This assumes that /image.php will properly return a 404 error when an image is not found, rather than displaying a default image itself.

Update

Following your PHP code, you might want to just echo the song name to HTML instead of to JavaScript:

<img src="/image.php?song=<?PHP echo $nameFile; ?>" onerror="this.style.display='none'" width="100" height="100" />