javascript - 如何忽略空的 href 和图像

Question

我需要以下编码方面的帮助。谢谢。

问题: 如果“网站”或我的图片不可用，“名称”仍将显示为链接。 并且会显示损坏的图像。

有没有一种方法可以让“网站”为空时，“名称”只显示为普通文本。如果我没有图片，它不会显示损坏的图片链接吗？

代码:

<script type="text/javascript">
    var absPath = 'http://www.example.com/images/contacts/'
    var CONTACTS = {};

    CONTACTS['this-0001'] ={
        name: 'Company Name 1',
        website: 'http://www.companyname1.com',
        address: 'Company 1, USA',
        tel: '+123234567',
        email: 'info@co1.com',
        extension: '.jpg'
    }

    CONTACTS['this-0002'] ={
        name: 'Company Name 2',
        website: '',
        address: 'Company 2, India',
        tel: '+23456789, +234567456',
        email: 'contact@company2.com',
        extension: '.jpg'
    }



    $(function(){

        var cid = getQueryVariable('cid');

       $('.cid-container').hide();

        if (cid !== false) {

            if(CONTACTS[cid] !== undefined) {
                $('.cid-container').show();

                $('.cid-name').html(CONTACTS[cid].name);
                $('.cid-name-link').attr("href", CONTACTS[cid].website);
                $('.cid-address').html(CONTACTS[cid].address);
                $('.cid-tel').html(CONTACTS[cid].tel);
                $('.cid-email-link').attr("href", "mailto:" + CONTACTS[cid].email);
                $('.cid-email').html(CONTACTS[cid].email);
                $('.cid-logo').html("<img src='" + absPath + cid + CONTACTS[cid].extension + "' />");
            }
            else {

            }
        }

    });

    function getQueryVariable(variable) {
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return false;
    }
</script> 


<div class="cid-container" style="text-align:center">
    <div>
        <h3>My Contacts</h3>
        <div class="cid-logo"></div>
        <p><a class="cid-name-link" target="_blank"><span class="cid-name"></span></a></p>
        <p class="cid-address"></p>
        <p class="cid-tel"></p>
        <p><a class="cid-email-link"><span class="cid-email"></span></a></p>
    </div>
</div>

谢谢，梅尔

Answer 1

您可以使用事件 onerror如果未加载 img，请在您的 img 标签上创建您想要的内容。

<img src="image.gif" onerror="this.style.display = 'none';">

使用jquery

$('.cid-logo').html("<img class='img' src='" + absPath + cid + CONTACTS[cid].extension + "' />")
$('.img').on( "error", function () { $(this).hide(); });