Vérifier si une image existe

Hexa
Javascript

Décrivez ici votre problème ou ce que vous cherchez à faire.

Bonjour,
dans mon tableau j'affiche au début de chaque rangée l'image correspondante à mon article.

Voici le haut de la colonne "image" de mon tableau:
<th data-field="image" data-valign="middle" data-formatter="imageFormatter">Image</th>

Voici l'affichage de mon image:

// affichage image par article
function imageFormatter(value, row, index) {
return '<img src="images-pieces/'+[row.id]+'.jpg" />'
}

Ce que j'obtiens

Si l'image existe dans le répertoire "images-pieces", la bonne image apparaît au début de la bonne rangée.
Si l'image n'existe pas, le petit carré "lien mort" apparaît.

Ce que je veux

J'aimerais faire apparaître une image par défaut telle que "pas-de-photo.jpg" si l'image n'existe pas.

Pouvez-vous m'aider?
Merci

6 réponses

Carouge10
Réponse acceptée

bonjour,
quelle est le rapport avec le js ?
tu peux utiliser la fonction file_exists en php

Hexa
Auteur

Bin mon '+[row.id]+' c'est ce que je récupère de mon json!
Toutes la variables du tableau sont récupérées d'un json d'ailleurs...

Je fais essayer ton file_exists mais je ne vois pas comment php va digérer ma concaténation js.

Carouge10

un peu de recherche alors ....
file exists javascript....

Hexa
Auteur

Oui, déjà fait!
J'en ai essayé des tonnes!

Je continu à chercher....

Soundboy39

D'où vient le JSON dans lequel tu récupère les Url des images (d'ailleurs ça aurait été bien de le préciser dans ton post initial... bref) ?

Est-ce que c'est toi qui le génère via le backend ? si oui il faut que tu gère l'inexistance des fichiers côté backend, en remplaçant les Url des images non existantes par l'Url de l'image par défaut, ce sera beaucoup plus propre et optimisé que de le gérer côté front.

Si c'est une API tierse qui t'envoi des Url KO, alors il faut voir avec eux car c'est quand même une anomalie plutôt majeure.

Après si vraiment tu est coincé... tu pourrais peut être testé en amont de la boucle les Url de chaque image via une requête Ajax (jQuery permet l'éxecution de plusieurs requêtes simultanées il me semble), ou alors vérifier, pour chaque image, si elle a été chargée en lui attachant un évenement "load" comme ici : https://www.techiedelight.com/check-whether-image-is-loaded-with-javascript/

Dans les 2 cas ça reste une situation dégradée et je doute que tu trouve une solution miracle.

Hexa
Auteur

Merci pour ta réponse toi aussi Soundboy.
Plus on est précis et plus on est concis dans une question, plus simple sera la compréhension des lecteurs. J'avais pas envie de m'étaler en expliquant tout ce qui se passe sur mon site.
C'est pour ça que j'ai fait au plus simple.

Entre-temps, je me suis démerdé tout seul et j'ai trouvé une solution.

J'ai fait un file_exists() en php juste à la sortie de ma requête sql et ensuite j'envois tout ça en json et ça marche nickel.

Je met ma petite coche verte à Carouge qui m'a mis sur le voie.

Merci pour vos réponses!