2

como podria ocultar las imagenes que no cargan correctamente.. aqui les dejo tres imagenes, una que me carga bien y la otra no.. Estas imagenes son de un producto, si se fijan bien antes del .jpg del href de la etiqueta IMG hay un número y seguido un guion (-) que indica que muestre la imagen 1,2,3.. etc.

/imagenescatalogo/8469-1.jpg /imagenescatalogo/8469-2.jpg /imagenescatalogo/8469-5.jpg

No siempre la imagen con -5 sale con errores en otros productos, asi que debo ocultar esta imagen en caso de que me salga con error.

Buen dia!

EJEMPLO..

<table>
  <tr>
    <th>Imagen 1</th>
    <th>Imagen 2</th>
    <th>Imagen 3</th>
    <th></th>
  </tr>
  <tr>
    <td><img id="img1" src="https://www.dyna.com.co/thumb/phpThumb.php?src=http://190.248.128.69:8002/public/imagenescatalogo/8469-1.jpg&w=350&h=350&far=1&bg=ffffff&q=99" width="84" height="84" alt=""></td>
    <td><img id="img1" src="https://www.dyna.com.co/thumb/phpThumb.php?src=http://190.248.128.69:8002/public/imagenescatalogo/8469-2.jpg&w=350&h=350&far=1&bg=ffffff&q=99" width="84" height="84" alt=""></td>
    <td><img id="img1" src="https://www.dyna.com.co/thumb/phpThumb.php?src=http://190.248.128.69:8002/public/imagenescatalogo/8469-5.jpg&w=350&h=350&far=1&bg=ffffff&q=99" width="84" height="84" alt=""></td>
    <td> 
      <h4>
        El link de esta imagen está bien, solo que no existe en el sv y la quiero ocultar.
      </h4> 
    </td>
  </tr>
</table>

2
  • Lo único que se me ocurre es que pruebes la url de la imagen original http://190.248.128.69:8002/public/imagenescatalogo/8469-5.jpg con una petición ajax, de manera de detectar cuáles devolvieron un error 404. De la manera como lo tienes ahora, ese error lo maneja el generador de thumbnails y siempre te devolverá un header 200.
    – ffflabs
    Commented el 1 dic. 2017 a las 18:15
  • @amenadiel ¿Cómo se haria?
    – RubxnMC
    Commented el 1 dic. 2017 a las 19:07

2 respuestas 2

3

Hay un evento para las imagenes cuando no cargan, y llames a un function para decidir que hacer:

<img src="image.gif" onerror="myFunction()">
2
  • Tú código no es funcional, no deberias colocarlo en un snippet
    – ESCM
    Commented el 1 dic. 2017 a las 20:20
  • editado* gracias por la corrección
    – Michael
    Commented el 1 dic. 2017 a las 20:27
2

Algo de JQuery puede solucionar tu problema con el evento on error, pero para eso tienes que mover el atributo "src" a la porcion en JQuery tambien,

a proposito, super mala practica tener varios elementos bajo la misma ID, si quieres seleccionarlos a la vez lo ideal es tener diferentes IDs pero la misma clase.

$("#img1") .on('error', function() {$(this).visible=false;}) .attr("src", $("https://www.dyna.com.co/thumb/phpThumb.php?src=http://190.248.128.69:8002/public/imagenescatalogo/8469-1.jpg&w=350&h=350&far=1&bg=ffffff&q=99").attr("src"))

$(document).ready(function(){
$("#img1")
    .on('error', function() 
    {
	    $(img1)[0].style.display = "none";
	  })
	  .attr("src", $("#img1Hidden")[0].src);
	
  $("#img2")
    .on('error', function() {
	    $(img2)[0].style.display = "none";
    })
	  .attr("src", $("#img2Hidden")[0].src);
	
  $("#img3")
    .on('error', function() {
	    $(img3)[0].style.display = "none";
	  })
	  .attr("src", $("#img3Hidden")[0].src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table>
  <tr>
    <th>Imagen 1</th>
    <th>Imagen 2</th>
    <th>Imagen 3</th>
    <th></th>
  </tr>
  <tr>
    <td><img id="img1Hidden" src="https://www.dyna.com.co/thumb/phpThumb.php?src=http://190.248.128.69:8002/public/imagenescatalogo/8469-1.jpg&w=350&h=350&far=1&bg=ffffff&q=99" width="84" height="84" alt="" style="display:none">
    <img id="img1" width="84" height="84" alt="">
    
    </td>
    <td><img id="img2Hidden" src="https://www.dyna.com.co/thumb/phpThumb.php?src=http://190.248.128.69:8002/public/imagenescatalogo/8469-2.jpg&w=350&h=350&far=1&bg=ffffff&q=99" width="84" height="84" alt="" style="display:none">
     <img id="img2" width="84" height="84" alt="">
    </td>
    <td><img id="img3Hidden" src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png" width="84" height="84" alt="" style="display:none">
       <img id="img3" width="84" height="84" alt="">
    </td>
    <td> 
      <h4>
        El link de esta imagen está bien, solo que no existe en el sv y la quiero ocultar.
      </h4> 
    </td>
  </tr>
</table>

1
  • Por alguna razon el API de jquery no funciona
    – Mike
    Commented el 1 dic. 2017 a las 21:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.