HTML中图片无法显示仅显示橙色方块问题求助

核心问题：标签属性拼写错误 #

你的HTML代码里<img>标签的图片路径属性拼写错误——把src写成了scr，这是导致图片加载失败的直接原因。浏览器无法识别错误的属性，因此显示占位的橙色方块。

修正后的代码 #

HTML部分：

<div class="top-menu">
<img src="logo.png" class="logo">
</div>

CSS部分（无需修改）：

.top-menu{
    background-color: rgba(0, 255, 255, 0.603);
    overflow: hidden;
    height:100px;
    font-family: 'Merriweather', serif;
    font-family: 'Mooli', sans-serif;
}
.logo{
    float: left;
    width: 100px;
    height:100px
}

额外排查点（如果修正后仍有问题） #

• 图片路径验证：确认logo.png和HTML文件在同一目录下；如果不在同一目录，需要写对相对路径（比如./images/logo.png）或绝对路径。
• 图片文件状态：检查图片是否损坏、文件名是否大小写匹配（部分服务器区分大小写）。
• 浏览器缓存：按下Ctrl+F5强制刷新页面，清除旧的缓存内容。

内容的提问来源于stack exchange，提问作者Matthew Wright