Verificar se um arquivo de imagem existe – JavaScript
Dado um arquivo de imagem, como verificar se ele existe usando apenas javascript ?
Eu consegui pensar em pelo menos três formas de fazer isso.
Verificando com AJAX
<script type="text/javascript"> function is_img(file) { var ajax = new XMLHttpRequest(); ajax.open("GET",file,true); ajax.send(); ajax.onreadystatechange = function() { if (ajax.readyState == 4){ var jpg = ajax.responseText; if(ajax.status===200) { console.log("A imagem " + file + " existe"); } else { console.log("A imagem " + file + " NAO existe"); } } } } is_img("imagem-garfield.jpg"); is_img("imagem-garfield-2.jpg"); </script>
A propriedade status do objeto ajax existe exatamente para isso. Caso não exista ela retorna 404, caso exista retornará 200, ou então 304(not modified) dependendo de como você serve imagens com o teu servidor.
Verificando com new Image();
<script type="text/javascript"> function is_img(file) { var img = new Image(); img.src = file; img.onload = function() { console.log("A imagem " + file + " existe"); } img.onerror = function() { console.log("A imagem " + file + " NAO existe"); } } is_img("imagem-garfield.jpg"); is_img("imagem-garfield-2.jpg"); </script>
Outra possibilidade é usar aquele truque que conhecemos para fazer preload de arquivos de imagem, usando o objeto Image()
Aqui é bem simples, se a imagem responder no evento onload(), então ela existe, caso não, disparará o evento onerror, ai sei que deu algo errado.
Verificar com document.createElement
Aqui o truque para saber se o arquivo de imagem existe ou não, é o mesmo do método acima. Usando os eventos onload, e onerror. Porém o resource agora é criado com um elemento imagem, e não com o objeto.
<script type="text/javascript"> function is_img(file) { var img = document.createElement('img'); img.src = file; img.onload = function() { console.log("A imagem " + file + " existe"); } img.onerror = function() { console.log("A imagem " + file + " NAO existe"); } } is_img("imagem-garfield.jpg"); is_img("imagem-garfield-2.jpg"); </script>