如何将<img>定位在导航栏中两个<ul>之间？

<nav class="navbar">
  <ul class="nav-list left">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <img src="path/to/image.jpg" alt="Navigation Image" class="nav-image">
  <ul class="nav-list right">
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f0f0f0;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.nav-list li {
  margin: 0 10px;
}

.nav-image {
  width: 50px; /* 根据需要调整图片大小 */
  height: auto;
}