异步调用查看文件是否存在是更好的方法，因为它不会因为等待服务器的响应而降低用户体验。如果调用.open，将第三个参数设置为false(如上面的许多示例，例如http. open)。open('HEAD'， url, false);)，这是一个同步调用，您会在浏览器控制台中得到一个警告。

更好的方法是:

function fetchStatus( address ) {
  var client = new XMLHttpRequest();
  client.onload = function() {
    // in case of network errors this might not give reliable results
    returnStatus( this.status );
  }
  client.open( "HEAD", address, true );
  client.send();
}

function returnStatus( status ) {
  if ( status === 200 ) {
    console.log( 'file exists!' );
  }
  else {
    console.log( 'file does not exist! status: ' + status );
  }
}

来源:https://xhr.spec.whatwg.org/

jQuery:

$.ajax({
    url:'http://www.example.com/somefile.ext',
    type:'HEAD',
    error: function()
    {
        //file not exists
    },
    success: function()
    {
        //file exists
    }
});

编辑:

下面是检查404状态的代码，不使用jQuery

function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

小的改变，它可以检查状态HTTP状态码200(成功)。

编辑2:由于sync XMLHttpRequest已弃用，你可以添加一个这样的实用方法来异步执行:

function executeIfFileExist(src, callback) {
    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function() {
        if (this.readyState === this.DONE) {
            callback()
        }
    }
    xhr.open('HEAD', src)
}

这对我来说很管用:

function ImageExist(url) 
{
   var img = new Image();
   img.src = url;
   return img.height != 0;
}

这是对公认答案的改编，但我不能从答案中得到我需要的东西，必须测试它是否有效，因为这是一种直觉，所以我把我的解放在这里。

我们需要验证一个本地文件是否存在，并且只允许该文件(PDF)在存在的情况下打开。如果你省略了网站的URL，浏览器将自动确定主机名-使其在localhost和服务器上工作:

$.ajax({

    url: 'YourFolderOnWebsite/' + SomeDynamicVariable + '.pdf',
    type: 'HEAD',
    error: function () {
        //file not exists
        alert('PDF does not exist');

    },
    success: function () {
        //file exists
        window.open('YourFolderOnWebsite/' + SomeDynamicVariable + '.pdf', "_blank", "fullscreen=yes");

    }
});

如果你使用Babel transpiler或Typescript 2，下面是如何用ES7的方式来做:

async function isUrlFound(url) {
  try {
    const response = await fetch(url, {
      method: 'HEAD',
      cache: 'no-cache'
    });

    return response.status === 200;

  } catch(error) {
    // console.log(error);
    return false;
  }
}

然后在你的其他异步作用域中，你可以很容易地检查url是否存在:

const isValidUrl = await isUrlFound('http://www.example.com/somefile.ext');

console.log(isValidUrl); // true || false

这并没有解决OP的问题，但对于任何从数据库返回结果的人来说:这里是我使用的一个简单方法。

如果用户没有上传头像，头像字段将为NULL，所以我将从img目录插入一个默认头像图像。

function getAvatar(avatar) {
    if(avatar == null) {
        return '/img/avatar.jpg';
    } else {
        return '/avi/' + avatar;
    }
}

then

<img src="' + getAvatar(data.user.avatar) + '" alt="">