本地localhost运行HTML页面图片无法显示仅展示占位图标如何解决

核心错误：ID拼写不一致 #

你提供的代码中存在拼写失误：JavaScript逻辑里调用document.getElementById()传入的参数是Blub，但页面上img标签实际设置的id属性是Bulb，二者不匹配导致JS无法正确定位到图片元素修改资源地址。如果初始加载时图片就显示占位图标，还需要排查路径相关问题。

修正后的可运行代码如下：

<script>
function light(sw) {
    var pic;
    if(sw == 0) {
        pic = "pic_bulboff.gif";
    } else {
        pic = "pic_bulbon.gif";
    }
    // 修正ID拼写为和img标签一致的Bulb
    document.getElementById("Bulb").src = pic;
}
</script>
<img id="Bulb" src="pic_bulboff.gif" width="100" height="100">
<p>
    <button type="button" onclick="light(0)">关闭灯泡</button>
    <button type="button" onclick="light(1)">打开灯泡</button>
</p>

其他常见排查方向 #

如果修正拼写后问题仍然存在，可以按以下步骤排查：

• 确认本地服务器启动的根目录是否为你存放HTML、图片文件的文件夹。如果启动服务时的根目录层级高于文件所在目录，即使本地文件放在同一文件夹，相对路径也会读取失败
• 按F12打开浏览器开发者工具，切换到「网络」面板后刷新页面，查看图片资源的请求状态，根据404、跨域等对应报错调整配置
• 确认你的系统没有隐藏文件后缀名，避免出现图片实际后缀为.GIF大写、或者文件名多了空格等肉眼不容易发现的命名问题

内容的提问来源于stack exchange，提问作者Jesse Lehman