通過javascript加載圖像

-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未加載

來源

2013-02-26 Techy

你究竟遇到了什麼問題？ – 2013-02-26 10:20:58

'有時它可能從數據庫中丟失'丟失您的用戶數據不能以任何方式接受。所以找出爲什麼這是消失。 – AmazingDreams 2013-02-26 10:21:11

@ToonCasteele如果$ row_photo沒有加載，我想加載「no_image.png」。它不會發生在我的情況。我認爲錯誤是在javascript方法 – Techy 2013-02-26 10:22:40

你說過（在評論中）

如果變量爲空，「no_image.png」是displaying.Bit如果沒有加載圖像時，沒有顯示「no_image.png」

因此，這不是一個路徑問題，有什麼問題撥打imageError。

如果你曾與id"image1"的img元素的調用將是正確的。但是你的img元素沒有那個id，並且你沒有顯示一個不同的那個。

如果你的目標是展示no_image.png在img元素有錯誤，則：

您onerror屬性更改來自：

onerror="imageError()"

到

onerror="imageError(this)"

，然後改變imageError至：

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

來源

2013-02-26 10:26:32

它對我來說很好。謝謝 – Techy 2013-02-26 10:31:36

@AnazA：酷！很高興這有幫助。 – 2013-02-26 10:39:36

確保您將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>

來源

2013-02-26 10:27:31

根據您的數據庫結構是否是我的一樣，你可以使用這個功能，我把它放在我的用戶類中。

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");

但是，我有我的圖片一個單獨的表，我不直接存儲圖像路徑。

來源

2013-02-26 10:27:44 AmazingDreams

我必須添加我想散列'$ image_ID'和'$ user_ID'，這樣一些驢不能簡單地'滾動'通過我的用戶的圖像。 – AmazingDreams 2013-02-26 10:30:58

通過javascript加載圖像

回答

相關問題