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'">

此代码适用于我：

  <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>

使用jQuery插入图像 - 检查图像是jpg还是png

1 个答案: