Lien vers une image

Version imprimable

14/03/2021, 18h28
apdf1

Lien vers une image

Bonjour

J'ai un lien vers une image qui est formulé comme ceci

Code:

<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Corbonod.png" class="img_ville" width="120" height="150" id="img111" style="display:none;">

mon problème est que lorsque l'image n’existe pas, j'aimerais qu'il affiche un logo à la place du nom de "sans blason" en sachant qu'il y a une image qui se nome "sans blason" dans le même dossier.

Je vous remercie d'avance
Max
14/03/2021, 19h49
mathieu

le plus simple pour faire ça est d'utiliser un langage côté serveur comme PHP par exemple. est ce que vous avez cela sur votre hébergement ?
14/03/2021, 20h13
apdf1

Bonjour non j'ai pas
Merci
15/03/2021, 04h52
Doksuri
sans php, il n'y aurai que le js
Code:

1 2 3 <div> <img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Corbonod.png" class="img_ville" width="120" height="150" id="img111" style="display:none;"> </div>
Code:

document.getElementById('img111').addEventListener('error', function() { this.parentNode.innerHTML = 'sans blason'; });

Bonjour Doksuri et merci

Pour le code Js mais j'ai oublié de dire que j'avais plusieurs lignes c'est à dire comme ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/L_Abergement_Clemenciat-01.png" class="img_ville" width="120" height="150" id="img1" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/L_Abergement_De_Varey-01.png" class="img_ville" width="120" height="150" id="img2" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/amberieu_en_bugey-01.png" class="img_ville" width="120" height="150" id="img3" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/amberieux_en_dombes-01.png" class="img_ville" width="120" height="150" id="img4" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Ambleon-01.png" class="img_ville" width="120" height="150" id="img5" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Ambronay-01.png" class="img_ville" width="120" height="150" id="img6" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Ambutrix-01.png" class="img_ville" width="120" height="150" id="img7" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Andert_Et_Condon-01.png" class="img_ville" width="120" height="150" id="img8" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Anglefort-01.png" class="img_ville" width="120" height="150" id="img9" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Apremont-01.png" class="img_ville" width="120" height="150" id="img10" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Aranc-01.png" class="img_ville" width="120" height="150" id="img11" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Arandas-01.png" class="img_ville" width="120" height="150" id="img12" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Arbent-01.png" class="img_ville" width="120" height="150" id="img13" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Arbignieu-01.png" class="img_ville" width="120" height="150" id="img14" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Arbigny-01.png" class="img_ville" width="120" height="150" id="img15" style="display:none;">

Sa peu aller jusqu’à 150 lignes ou images
et sur le code que tu me donne j'ai le non d'une image comme sur ton exemple img111

Code:

document.getElementById('img111').addEventListener('error', function() { this.parentNode.innerHTML = 'sans blason'; });

Peu tu m'aider
Je te remercie d'avance
Max

15/03/2021, 09h16
Doksuri

as-tu essaye d'ajouter l'attribut alt sur tes images ?
developer.mozilla.org/fr/docs/Web/HTML/Element/Img

Citation:

L'attribut alt n'est pas obligatoire mais recommandé et contient une description textuelle de l'image ; il est recommandé pour des raisons d'accessibilité et sera utilisé par les lecteurs d'écran ou sera affiché si l'image ne peut pas être chargée.

ou alors tu veux vraiment un truc JS ?
15/03/2021, 18h20
apdf1

Bonsoir
Oui en JS ça me conviendrai
Merci
Max

j'ai ajoute un div conteneur pour l'exemple, car je ne connais pas la structure de ta page

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="container">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/L_Abergement_Clemenciat-01.png" class="img_ville" width="120" height="150" id="img1" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/L_Abergement_De_Varey-01.png" class="img_ville" width="120" height="150" id="img2" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/amberieu_en_bugey-01.png" class="img_ville" width="120" height="150" id="img3" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/amberieux_en_dombes-01.png" class="img_ville" width="120" height="150" id="img4" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Ambleon-01.png" class="img_ville" width="120" height="150" id="img5" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Ambronay-01.png" class="img_ville" width="120" height="150" id="img6" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Ambutrix-01.png" class="img_ville" width="120" height="150" id="img7" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Andert_Et_Condon-01.png" class="img_ville" width="120" height="150" id="img8" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Anglefort-01.png" class="img_ville" width="120" height="150" id="img9" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Apremont-01.png" class="img_ville" width="120" height="150" id="img10" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Aranc-01.png" class="img_ville" width="120" height="150" id="img11" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Arandas-01.png" class="img_ville" width="120" height="150" id="img12" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Arbent-01.png" class="img_ville" width="120" height="150" id="img13" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Arbignieu-01.png" class="img_ville" width="120" height="150" id="img14" style="display:none;">
<img class="img_info" src="../../Auvergne-Rhone-Alpes/images/Arbigny-01.png" class="img_ville" width="120" height="150" id="img15" style="display:none;">
</div>

Code:

1
2
3
4
5
6
7
8
document.querySelectorAll('#container img').forEach(img => {
	img.addEventListener('error', () => {
    const div = document.createElement('div');
    div.textContent = 'sans blason';
    img.parentNode.insertBefore(div, img.firstChild);
    img.remove();
  });
});

pour chaque image en erreur, il la remplace par un div qui affiche "sans blason"

c'est ce que tu voulais ?

18/03/2021, 09h05
apdf1

Bonjour et merci

Mais ça ne fonctionne pas ? ou peut erre j'ai pas compris le principe

Max
18/03/2021, 10h48
Doksuri

jsfiddle.net/86eymctp/