可否判断文件是否存在？

Question

firefox浏览器。
需要指定一个图片。
这里v是一个变量，如果 v+".jp" 这个图片文件存在，就执行。
document.getElementById("img1").src=v+".jpg";

当v+".jp" 这个图片文件不存在，就执行。
document.getElementById("img1").src="promotion.jpg";

请问，如何用js 做到？

Answer 1

img是通过onload的函数来确认是否能加载成功 也就是存不存在

var img = new Image();   // 创建img元素
img.onload = function(){
  // 加载成功，表示存在
}
img.onerror =function(){
    //不存在的时候执行
}
img.src = 'myImage.png'; // 设置图片源地址

Answer 2

如果不是图片文件呢？

Answer 3

只能先请求一次图片, 如果没成功再替换 src.

    var r = 'request.jpg';
    var img = new Image();
    img.onload = function() {
        this.onload = this.onerror = null;
        return document.body.appendChild(this);
    };
    img.onerror = function() {
        this.onload = this.onerror = null;
        this.setAttribute('src', 'default.png');
        return document.body.appendChild(this);
    };
    img.setAttribute('src', r);

Answer 4

图片可以这样写：

<img onerror="imgErr()" id="img1">
<script>
    var v = 1;
    document.getElementById("img1").src=v+".jpg";
    function imgErr(){
        console.log('图片加载失败');
        document.getElementById("img1").src="promotion.jpg";
        //promotion.jpg 不存在时 会陷入死循环~~
    }
</script>

其他文件在页面上哪里有用到呢？