img标签显示文件夹中的img但背景图片不显示？

Question

I'm using the below code to pull through user uploads into a portfolio. It's working great however one image (out of a list of many) is showing blank - yet displays on the next page, using the same path, but within a conventional <img /> tag.

<?php
    $files= glob('./uploads/users/'. $item->user_id .'/'.$item->id.'/public_large/*');
    $count = 0;
    $user_avatar = '/themes/users/assets/img/noartwork.jpg'; 

    foreach ($files as $file) {
        $count++;
        if ($count > 0 && is_file($file)) { 
            $user_avatar = $file;
        } 
    }
?>   
<div class="user-img" style="background-image:url('<?php echo site_url($user_avatar); ?>');"></div>

When I inspect element on the image that's not displaying, if I change the single quotes background-image:url('<?php echo site_url($user_avatar); ?>'); to double background-image:url("<?php echo site_url($user_avatar); ?>"); it pulls through, but this is not the case if I make this change in the actual code.

Any help would be great.

Thanks

Answer 1

have you tried removing single quotes? like this :

 background-image:url(<?php echo site_url($user_avatar); ?>);

Answer 2

I found the fix for this. It was to do with the users file name containing a special character that I wasn't checking for eg my-user's-image.jpg breaks the code as the character needs to be escaped my-user\\'s-image.jpg .

I amended the foreach to run a check as below and this is now working.

foreach ($files as $file) {
    $count++;
    if ($count > 0 && is_file($file)) { 
        $user_avatar = str_replace("'", "\'", $file);
    } 
}

Thanks