HTML導航欄是網站中常見的一種頁面元素，它可以幫助用戶迅速找到自己需要的內容。在導航欄中加入圖片是一種常見的做法，可以幫助美化頁面，增加用戶體驗。 一般來說，導航欄是一個有序列表（ol）或無序列表（ul），每個列表項（li）代表一個導航鏈接。在這些列表項中，我們可以加入圖片，以達到美化效果。 下面是一個簡單的HTML導航欄代碼示例：

<ul class="navigation">
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">產品</a></li>
<li><a href="#">聯系我們</a></li>
</ul>

在這個代碼中，我們使用了一個無序列表，每個列表項都是一個導航鏈接。如果我們想要在每個導航鏈接前加入一個小圖標，可以在<li>標簽中加入一個<img>標簽。 下面是代碼示例：

<ul class="navigation">
<li><img src="home.png" alt="Home" width="20" height="20"><a href="#">首頁</a></li>
<li><img src="about.png" alt="About" width="20" height="20"><a href="#">關于我們</a></li>
<li><img src="product.png" alt="Product" width="20" height="20"><a href="#">產品</a></li>
<li><img src="contact.png" alt="Contact" width="20" height="20"><a href="#">聯系我們</a></li>
</ul>

在這個代碼中，我們在每個<li>標簽中加入了一個<img>標簽，并設置了它的src、alt、width和height 屬性。這些屬性分別表示圖片的文件路徑、鼠標放在圖片上時的提示文字、圖片的寬度和高度。 另外，如果我們想要將所有圖片的大小保持一致，我們可以在CSS中設置一個共同的類名，然后在<img>標簽中加入這個類名。下面是示例代碼：

<ul class="navigation">
<li><img class="icon" src="home.png" alt="Home"><a href="#">首頁</a></li>
<li><img class="icon" src="about.png" alt="About"><a href="#">關于我們</a></li>
<li><img class="icon" src="product.png" alt="Product"><a href="#">產品</a></li>
<li><img class="icon" src="contact.png" alt="Contact"><a href="#">聯系我們</a></li>
</ul>
<style>
.icon {
width: 20px;
height: 20px;
}
</style>

在CSS中，我們設置了一個.icon類，將所有圖片的寬度和高度都設置為20px。然后，在HTML代碼中，我們在所有<img>標簽中加入了這個類名，以達到統一大小的效果。 總結來說，使用圖片可以讓導航欄更加美觀，也能增加用戶體驗。我們可以在HTML代碼中的<li>標簽中加入<img>標簽，來為每個導航鏈接加上小圖標。如果我們想要統一圖片大小，可以在CSS中設置一個類名，并在<img>標簽中加入這個類名。