HTML列表元素图片不可见问题求助及工具栏实现建议

一、图片不显示的核心原因及修复步骤 #

1. 错误的图片标签 #

你HTML里用了<image>标签，但HTML标准里没有这个标签，正确的图片标签是<img>，这是导致图片不显示的最直接原因。

2. 修复后的代码 #

修正后的HTML（替换所有<image>为<img>）

<div class="container toolbar py-1 mw-100 px-5 ">
    <ul class="toolbar-menu">
        <li>
            <a href="#" id="color" data-bs-toggle="tooltip" title="Font Color">
                <img class="toolbar-img" src="toolbar/color-filling.svg" alt="Font Color">
            </a>
            <div class="toolbar-tool">
                <ul>
                    <li>Above All</li>
                </ul>
            </div>
        </li>
        <li>
            <a href="#" id="Size" data-bs-toggle="tooltip" title="Font Size">
                <img class="toolbar-img" src="toolbar/font-size.svg" alt="Font Size">
            </a>
        </li>
        <li>
            <a href="#" data-bs-toggle="tooltip" title="Lock Note">
                <img id="lock" class="toolbar-img" src="toolbar/lock-open.svg" alt="Lock Note">
            </a>
        </li>
    </ul>   
</div>

3. 额外排查点 #

• 确认图片路径：检查toolbar文件夹是否和当前HTML文件在同一目录下，如果HTML在子文件夹，路径要改成../toolbar/xxx.svg
• 验证CSS样式：可以给.toolbar-img加display: inline-block;确保样式生效，避免默认inline布局的潜在问题：

.toolbar-img{
    max-width: 20px;
    display: inline-block; /* 新增 */
}

二、更优的工具栏实现方案 #

1. 语义化与交互优化 #

• 用<button>代替<a>标签（工具栏按钮是操作而非跳转链接，更符合语义化）
• 子菜单使用绝对定位，hover时自动显示，增强交互体验
• 加入基础hover效果、阴影样式提升视觉质感

2. 优化后的完整代码 #

CSS

.toolbar{
    text-align: right;
    padding: 0.5rem 1rem;
}
.toolbar-menu{
    display: inline-flex;
    position: relative;
    list-style: none;
    gap: 0.5rem; /* 用gap代替margin，布局更简洁可控 */
    margin: 0;
    padding: 0;
}
.toolbar-menu li{
    padding: 0.3rem;
    position: relative; /* 为子菜单的绝对定位提供参考 */
    cursor: pointer;
    border-radius: 4px;
}
.toolbar-menu li:hover{
    background-color: #f0f0f0;
}
.toolbar-img{
    max-width: 20px;
    display: inline-block;
}
/* 子菜单样式优化 */
.toolbar-tool{
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    background-color: white;
    border: 1px solid #eee;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 0.5rem 0;
    min-width: 120px;
}
.toolbar-tool ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.toolbar-tool ul li{
    padding: 0.5rem 1rem;
    margin: 0;
}
.toolbar-tool ul li:hover{
    background-color: #f0f0f0;
}
/* hover时显示子菜单 */
.toolbar-menu li:hover .toolbar-tool{
    display: block;
}

HTML

<div class="container toolbar mw-100">
    <ul class="toolbar-menu">
        <li>
            <button id="color" data-bs-toggle="tooltip" title="Font Color">
                <img class="toolbar-img" src="toolbar/color-filling.svg" alt="Font Color">
            </button>
            <div class="toolbar-tool">
                <ul>
                    <li>Above All</li>
                    <li>Red</li>
                    <li>Blue</li>
                </ul>
            </div>
        </li>
        <li>
            <button id="Size" data-bs-toggle="tooltip" title="Font Size">
                <img class="toolbar-img" src="toolbar/font-size.svg" alt="Font Size">
            </button>
        </li>
        <li>
            <button id="lock" data-bs-toggle="tooltip" title="Lock Note">
                <img class="toolbar-img" src="toolbar/lock-open.svg" alt="Lock Note">
            </button>
        </li>
    </ul>   
</div>

3. 额外建议 #

• 若不想维护本地SVG文件，可以用Font Awesome等图标库，直接通过类名调用图标，彻底避免路径问题
• 可添加JavaScript交互逻辑，比如点击锁定按钮切换图标、选择颜色后应用到目标文本等

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