如何检测输入的URL值是否为有效图片地址？

开发者阿泽

2026-10-6

图片URL校验实现

需求说明

获取输入框的字符串内容，校验该URL对应的图片是否真实存在
点击「Check」按钮时，先校验输入值是否匹配图片后缀规则，再根据实际加载结果展示对应提示

原有代码问题梳理

执行顺序错误：return语句放在了结果赋值逻辑之前，直接中断函数执行，校验结果永远不会展示到页面
校验逻辑不严谨：仅判断URL后缀无法确认资源是否为可访问的有效图片，部分合法图片URL没有标准后缀也可正常加载
无效判断：输入框的value属性返回值固定为字符串，typeof url !== "string"的判断没有实际作用

完整可运行代码

HTML代码

<form action="">
  <input type="text" id="inputUrl" placeholder="url of image">
  <button type="button" id="checkImage">Check</button>
</form>

<h3 id="result">?</h3>

JS代码

// 先获取页面DOM元素
const checkImage = document.getElementById('checkImage')
const inputUrl = document.getElementById('inputUrl')
const result = document.getElementById('result')

checkImage.addEventListener("click", function () {
  const url = inputUrl.value.trim()
  // 先判断输入是否为空
  if (!url) {
    result.textContent = "请输入图片URL"
    return
  }
  // 校验后缀规则，添加i修饰符兼容大写后缀格式
  const isImageSuffix = /\.(jpg|jpeg|gif|png)$/i.test(url)
  if (!isImageSuffix) {
    result.textContent = "This is not an image"
    return
  }
  // 实际加载图片验证是否可访问
  const img = new Image()
  img.onload = function() {
    result.textContent = "图片存在，可正常访问"
  }
  img.onerror = function() {
    result.textContent = "图片不存在或无法访问"
  }
  img.src = url
});