关于html中img标签的问题

Posted 2023-04-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于html中img标签的问题相关的知识，希望对你有一定的参考价值。

我把img这样设置 <img src=""> 在firefox中显示没问题，就是什么都不显示，但在ie和chmore中都显示不正常。

ie:

chmore:

这是怎么回事，请问该如何解决？
PS: 如果src设置了具体的图片路径，则三个浏览器都能正常显示图片

Img的src指向的图片不存在，让img不显示出来

<img src='' onerror=""javascript:NoImage(this)"" /> <script type="text/javascript"> function NoImage(imgObject) this.style.display="none"; </script>

这样子处理，如果img指的src里图片不存在的话，img将隐藏起来参考技术A 如果不设置具体的图片路径，浏览器一般会认为这个img标签是不完整的，同时显示一个错误的标识，就是你看到的这两个图标。追问

那有什么办法可以既保留标签，又不显示图片吗？

追答

楼上用JS的方法应该是可以的，或者直接把img的宽高都设置为0，这样应该就看不到图标了。

本回答被提问者采纳参考技术B 不是firefox显示没问题，而是忽略了这样的显示，其他浏览器都有个图标占位表示有图片。追问

那有什么办法可以既保留标签，又不显示图片吗？

追答

使用display:none

解决img标签与其它标签间隙问题？

解决img标签间距问题

关于img标签间距问题：多个img之间有间距，包含img标签的div之间有间距

代码如下：

<!DOCTYPE html>
<html>

    <head>
        <style>
            *{
                margin: 0;padding: 0;
            }
            .content-wrapper{
                padding: 30px;
                height: 100px;
                background-color: black;
                color: white;
            }
            .avatar{
                display: inline-block;
            }
            .avatar img{
                width: 60px;
                height: 70px;
            }
            .content{
                display: inline-block;
                
                
            }
            .brand{
                font-size: 12px;
                display: block;
            }
        </style>
    </head>

    <body>

        <div class="content-wrapper">
            <div class="avatar">
                <img src="1.jpeg">
            </div>
            <div class="content">
                <span class="brand">前端小智</span>
                <span class="brand">前端爱好者</span>
                <span class="brand">终身学习者</span>
            </div>
        </div>
    </body>

</html>