2013-02-26 289 views
-1

我正在创建一个社交网站。我想从包含图像和名称的列表中显示数据库中的所有注册用户的详细信息。如果用户未提供图像image.If图像是由用户提供的,有时可能会从数据库中丢失。那时候我还需要显示一个特定的图像。我发现通过使用javascript方法onerror(),我们可以检查图像是否加载或不。我不知道它的实施。通过javascript加载图像

我的代码示例是这样的:

while($row_data = mysql_fetch_array($result_personal)) 
{ 
$row_photo = $row_data['acnt_profile_picture']; 
<div class="feedstory" id="feedstory"> 
<img src="<?php if($row_photo!=NULL){echo $row_photo;} 
else{?>images/no_image.png<?php }?>" id="image1" width="34" height="34" align="left" class="feedthumb" alt="photo" 
onerror="imageError()"/> 
</div> 
} 

我javscript方法是这样的:

function imageError() 
{ 
document.getElementById("image1").src="images/no_image.png"; 
} 

我需要显示no_image.png如果$row_photo为空或$row_photo未加载

+0

你究竟遇到了什么问题? – 2013-02-26 10:20:58

+1

'有时它可能从数据库中丢失'丢失您的用户数据不能以任何方式接受。所以找出为什么这是消失。 – AmazingDreams 2013-02-26 10:21:11

+0

@ToonCasteele如果$ row_photo没有加载,我想加载“no_image.png”。它不会发生在我的情况。我认为错误是在javascript方法 – Techy 2013-02-26 10:22:40

回答

1

你说过(在评论中)

如果变量为空,“no_image.png”是displaying.Bit如果没有加载图像时,没有显示“no_image.png”

因此,这不是一个路径问题,有什么问题拨打imageError

如果你曾与id"image1"img元素的调用将是正确的。但是你的img元素没有那个id,并且你没有显示一个不同的那个。

如果你的目标是展示no_image.pngimg元素有错误,则:

onerror属性更改来自:

onerror="imageError()" 

onerror="imageError(this)" 

,然后改变imageError至:

function imageError(img) 
{ 
    img.src="images/no_image.png"; 
} 
+0

它对我来说很好。谢谢 – Techy 2013-02-26 10:31:36

+0

@AnazA:酷!很高兴这有帮助。 – 2013-02-26 10:39:36

0

确保您将php代码放在php标记中。

jQuery的解决方案:

<?php 
while($row_data = mysql_fetch_array($result_personal)) { 
    $row_photo = $row_data['acnt_profile_picture']; 
?> 
    <div class="feedstory" id="feedstory"> 
     <img src="<?php echo $row_photo ?>" width="34" height="34" align="left" class="feedthumb" alt="photo" /> 
    </div> 
<?php } ?> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('img').error(function() { 
     $(this).attr({ 
      src: '/images/missing-image.jpg', 
      alt: 'Sorry! This image is not available!', 
      style:'border: 1px solid #f00;' 
     }); 
    }); 
}); 
</script> 
0

根据您的数据库结构是否是我的一样,你可以使用这个功能,我把它放在我的用户类中。

public static function ProfileImage($user_ID, $image_ID, $size) 
{ 
    global $http_r; 

    $image_URL; 
    if($image_ID != null) 
     $image_URL = $http_r ."/userfiles/images/". $user_ID ."/thumbnails/". $image_ID .".jpeg"; 
    else 
     $image_URL = $http_r ."/template/images/noprofilepic.jpg"; 

    ?> 
    <img src="<?php echo $image_URL; ?>" class="profile-<?php echo $size; ?>"> 
    <?php 
} 

然后使用类似如下:User::ProfileImage($user_ID, $image_ID, "small");

但是,我有我的图片一个单独的表,我不直接存储图像路径。

+0

我必须添加我想散列'$ image_ID'和'$ user_ID',这样一些驴不能简单地'滚动'通过我的用户的图像。 – AmazingDreams 2013-02-26 10:30:58