Javascript 图片 URL 验证的问题是如何检查图片 URL 的有效性和安全性的。解决方法是使用正则表达式来检查文件扩展名，并使用图片加载函数来验证图片是否可以成功加载。

首先，可以使用以下正则表达式检查文件扩展名：

function checkURL(url) {
    return(url.match(/\.(jpeg|jpg|gif|png)$/) != null);
}

这个函数检查URL是否以这四种扩展名之一结尾。

然而，无法通过客户端的JavaScript验证与网页不在同一域的URL的内容类型，因为无法在网页的域之外使用ajax。所以，最好的方法是将URL发送到服务器进行处理，让服务器下载图片并获取内容类型，然后将其返回给客户端。

但是，可以通过以下函数来检查图片标签是否可以加载URL：

function testImage(url, callback, timeout) {
    timeout = timeout || 5000;
    var timedOut = false, timer;
    var img = new Image();
    img.onerror = img.onabort = function() {
        if (!timedOut) {
            clearTimeout(timer);
            callback(url, "error");
        }
    };
    img.onload = function() {
        if (!timedOut) {
            clearTimeout(timer);
            callback(url, "success");
        }
    };
    img.src = url;
    timer = setTimeout(function() {
        timedOut = true;
        // reset .src to invalid URL so it stops previous
        // loading, but doesn't trigger new load
        img.src = "//!!!!/test.jpg";
        callback(url, "timeout");
    }, timeout); 
}

这个函数将在将来的某个时间调用回调函数，并传递两个参数：原始URL和结果（"success"、"error"或"timeout"）。可以在这里查看对几个URL进行测试的效果，有一些是好的URL，有一些是坏的URL：http://jsfiddle.net/jfriend00/qKtra/

另外，为了适应Promise的时代，以下是一个返回Promise的版本：

function testImage(url, timeoutT) {
    return new Promise(function (resolve, reject) {
        var timeout = timeoutT || 5000;
        var timer, img = new Image();
        img.onerror = img.onabort = function () {
            clearTimeout(timer);
            reject("error");
        };
        img.onload = function () {
            clearTimeout(timer);
            resolve("success");
        };
        timer = setTimeout(function () {
            // reset .src to invalid URL so it stops previous
            // loading, but doesn't trigger new load
            img.src = "//!!!!/test.jpg";
            reject("timeout");
        }, timeout);
        img.src = url;
    });
}

并且这里是一个jsFiddle演示：http://jsfiddle.net/jfriend00/vhtzghkd/

总结起来，这些函数提供了一种验证图片URL有效性和安全性的方法，通过检查文件扩展名和加载图片来验证URL的可用性。这样可以确保只加载有效的图片URL，并避免安全问题。

JavaScript 图片 URL 验证的原因是为了验证图片的 URL 字符串是否有效。通过使用正则表达式进行验证是简单的方法。代码中使用了以下正则表达式：

url.match(/^https?:\/\/.+\/.+$/)

我们只需要检查 URL 是否具有协议 https://、主机名 foobar.com、斜杠 /，然后是图片名称。不需要检查图片扩展名（png、jpg等），因为这是不必要的，浏览器通过头文件检查图片类型。

要检查图片是否存在，可以将其 URL 附加到一个 Image 构造函数，并检查是否出现错误。

const doesImageExist = (url) =>
  new Promise((resolve) => {
    const img = new Image();
    img.src = url;
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
  });

以上就是解决 JavaScript 图片 URL 验证的原因和方法。

Javascript Image Url Verify（JavaScript 图片URL验证）

在编写网页应用程序时，我们经常需要验证用户输入的图片URL是否有效。本文将介绍一种使用JavaScript进行图片URL验证的方法，并提供解决方案。

问题的出现原因：

当用户输入一个图片URL时，我们需要验证该URL是否指向一个有效的图片资源。如果无法正确验证URL，可能会导致加载错误的图片或者无法加载图片的情况发生。因此，我们需要一种方法来验证URL是否是一个有效的图片资源。

解决方法：

以下是两种使用JavaScript进行图片URL验证的方法：

1. 使用HEAD请求方法检查content type：

$.ajax({
  type: "HEAD",
  url : "urlValue",
  success: function(message,text,response){
     if(response.getResponseHeader('Content-Type').indexOf("image")!=-1){
           alert("image");
    }
  } 
});

这个方法通过发送一个HEAD请求来检查URL的content type（内容类型）。如果返回的content type中包含"image"，则说明该URL指向一个有效的图片资源。

2. 使用inArray方法检查URL的扩展名：

function checkUrl(url){
   var arr = [ "jpeg", "jpg", "gif", "png" ];
   var ext = url.substring(url.lastIndexOf(".")+1);
   if($.inArray(ext,arr)){
     alert("valid url");
     return true;
  }
}

这个方法通过获取URL的扩展名，并将其与一组已知的图片扩展名进行比较。如果扩展名存在于已知的扩展名数组中，则说明该URL指向一个有效的图片资源。

需要注意的是，上述两种方法都使用了jQuery库，因此需要在项目中引入jQuery。另外，如果使用Ajax方法进行验证URL，需要确保跨域资源共享（CORS）已经启用，否则可能无法进行跨站点请求。

最后，还需要注意一些代码中的错误。例如，代码中出现了一个拼写错误“lasIndexOf”，应该将它更正为“lastIndexOf”。另外，在代码中，一行有个括号缺失，应该将`$.ajax{}`更正为`$.ajax({})`。

通过上述方法，我们可以方便地验证用户输入的图片URL是否有效，从而提高网页应用程序的用户体验。