html 怎么判断li图片路径是否有文件

在 HTML 中，`li` 元素通常用于创建无序列表（`ul`）或有序列表（`ol）。

如果你想判断一个 `li` 元素中的图片路径是否有效，可以通过以下步骤来实现：

1. 首先获取到该 `li` 元素中的图片元素，可以使用 `querySelector` 或 `getElementsByTagName` 方法来获取。
2. 然后获取到图片元素的 `src` 属性值，判断这个属性值是否为空或者是否是一个有效的图片路径。
3. 如果图片路径有效，则说明该 `li` 元素中包含图片文件；如果图片路径无效，则说明该 `li` 元素中不包含图片文件。

示例代码如下：

<ul>
  <li><img src="images/cat.jpg" alt="猫咪"></li>
  <li><img src="images/dog.jpg" alt="狗狗"></li>
  <li><img src="images/bird.jpg" alt="小鸟"></li>
  <li><span>这是一个没有图片的列表项</span></li>
</ul>

<script>
  var liElements = document.getElementsByTagName("li");
  for (var i = 0; i < liElements.length; i++) {
    var imgElement = liElements[i].querySelector("img");
    if (imgElement) {
      var imgSrc = imgElement.getAttribute("src");
      if (imgSrc && imgSrc.match(/\.(png|jpe?g|gif)$/)) {
        console.log("该列表项中包含有效的图片文件");
      } else {
        console.log("该列表项中不包含图片文件");
      }
    } else {
      console.log("该列表项中不包含图片文件");
    }
  }
</script>

在上面的示例代码中，我们首先使用 `getElementsByTagName` 方法获取到所有的 `li` 元素，然后使用 `querySelector` 方法获取到每个 `li` 元素中的图片元素。接着，我们判断图片元素的 `src` 属性值是否存在以及是否是一个图片文件的路径，如果是，说明该列表项中包含图片文件；否则说明该列表项中不包含图片文件。