挿入画像のjQueryを使って - 画像はJPGまたはPNG

Question

であれば、私はこのようになりますリストを持って確認してください。

<ul> 
    <li>nameID0001</li> 
    <li>nameID0002</li> 
    <li>nameID0003</li> 
    <li>nameID0004</li> 
</ul> 

私は名前に関連付けられている写真がある知っています。これは 'nameID0001.jpg'または 'nameID0001.png'です。

私は名前の後に画像を挿入したい：

$('ul li').each(function() { 
    var nameID = $(this).text(); 
    $(this).append('<img src="/images/' + nameID + '.jpg" alt="" />'); 
}); 

ファイルが存在し、それがJPGまたはPNGの拡張子を持っているかどうかかどうかを認識する方法。

「default.jpg」を挿入します。それ以外の場合は適切な拡張子を付けて挿入します。

Answer 1

javascriptを使用してimg srcを変更してください。ただし、リモートイメージファイルは存在しません。

IMGノードにONERRORを追加します。

<IMG src="http://www.baidu.com/img/baidu_logo.gif" onerror="javascript:this.src='/images/logo.jpg'"> 

このコードは私のために動作します（[イメージがロードされている場合はJavaScriptに（エラーなし）をチェック]のhttpの

<ul> 
    <li>nameID0001</li> 
    <li>nameID0002</li> 
    <li>nameID0003</li> 
    <li>nameID0004</li> 
</ul> 

<script type="text/javascript"> 

    function changesrc(obj, nameID1) { 
     var src1 = obj.src.replace(".jpg", ".png"); 
     //ignore error while .png file not exist 
     if(src1 == obj.src) return; 
     obj.src = src1; 
    } 

    $('ul li').each(function() { 
     var nameID = $(this).text(); 
     $(this).append('<img src="/images/' + nameID + '.jpg" onerror="javascript:changesrc(this);" />'); 
    }); 

</script>