¿Cómo me aseguro de que una URL sea una imagen usando JavaScript + jQuery?

Question

En mi aplicación web, los usuarios pueden publicar texto en un feed, y el texto puede incluir URL. Mi código escanea las URL y las reemplaza con las etiquetas de anclaje apuntadas a las URL. Quiero cambiar esto para que mi código pueda detectar si la URL apunta a una imagen o no, y si lo hace, represente una etiqueta de imagen dentro de la etiqueta de anclaje, en lugar de solo el texto de la URL.

me puede hacer esto en el código del lado del servidor mediante el envío de una solicitud rápida 'cabeza' a la URL para ver cuál es el tipo de contenido es la respuesta, y esto funciona de forma fiable. Sin embargo, no escala bien por razones obvias.

Lo que sería mejor es si podría empujar esta lógica en el navegador del cliente. Me gustaría usar JavaScript + jQuery para enviar la solicitud 'HEAD' a la URL especificada y leer el encabezado Content-Type de la respuesta.

Sé que las solicitudes entre dominios son un problema. ¿Podría de alguna manera usar JSONP? ¿Que opciones tengo?

EDITAR - RIESGO DE SEGURIDAD

tengo buenas respuestas a mi pregunta, pero yo quería señalar algo en grandes letras en negrita. Como Adam señaló en los comentarios, este es un riesgo de seguridad. Si puede garantizar que las URL de las imágenes provienen de dominios de confianza, está de acuerdo con esta solución. Sin embargo, en mi caso, los usuarios pueden ingresar la URL que quieran. Esto significa que podrían crear su propio sitio que requiere autenticación básica, y luego, cuando el jQuery funciona para establecer el atributo src de la imagen creada, el usuario se presenta con un cuadro de diálogo nombre de usuario/contraseña, y eso es, obviamente, un gran riesgo .

Answer 1

Usted puede tratar de cargarlo en un elemento img oculto:

$('<img />').attr('src', url).load(function() { 
    alert('url contains an image'); 
}).error(function() { 
    alert('url is no image'); 
}); 

Answer 2

solo comprueba si la cadena que te dieron termina con .jpg, .png, .gif, etc. si termina con cualquier extensión como esa es una imagen. si no es así, es una URL normal.

Answer 3

Prueba esto:

uso de AJAX para cargar la URL a continuación, llamar getResponseHeader() para obtener el tipo de contenido.

En jQuery:

$.ajax({ 
    url: "www.example.com/SomeImage.jpg", 
    success: function(output, status, xhr) { 
    if(xhr.getResponseHeader("Content-Type")== "image/jpeg") { 
     // insert image into page 
    } 
    else { 
     // render url text 
    } 
    } 
}); 

Answer 4

Puede obtener la información de la cabecera mediante llamadas ajax usando XMLHttpRequestObject.open("HEAD", url); y XMLHttpRequestObject.getAllResponseHeaders(); pero esto sólo funciona con su propio dominio o el conjunto de la cabecera con Access-Control-Allow-Origin:.

JSONP utiliza script etiqueta y estoy bastante seguro de que no puede obtener ninguna información de la cabecera.

Answer 5

puede crear un objeto de javascript Image va a tratar de cargar todos los enlaces de esta manera:

myImageObject = new Image(); 

// handle an URL 
myImageObject.onload = function(e) { 
    alert('it is an image'); 
} 

myImageObject.src = 'http://www.google.bg/images/srpr/logo3w.png'; 

jsFiddle example