Bonjour !

Je cherche de l'aide, je galère sur un petit truc qui est le chargement d'une image si ça en est une. Dans le sens où, je fais une shoutbox, et j'aimerai que si le lien qui est mit dans le message se transforme en image si c'est le lien d'une image.

function reload(){
			xhr2.open('GET', '/shoutbox/reload-comments');
	        xhr2.send();
	        xhr2.addEventListener('readystatechange', function() {
	            if (xhr2.readyState === XMLHttpRequest.DONE && xhr2.status === 200) {
	                let array = xhr2.responseText;
	                let json = JSON.parse(array);
	                let str = "";
	                json.reverse().forEach(function(element) {
	                	let temp = new Image();
	                	let temp2 = '<img src="'+element.contenu+'" />';
	                	temp.onerror = function() {
	                		temp2 = element.contenu;
	                	} 
	                	temp.onload = function() {
	                		
	                	}
	                	temp.src = element.contenu;
	                	str += '<div><section class="pseudo-date"><span class="pseudo">'+element.pseudoUser+'</span><span class="date-de-post">'+element.datePost+'</span></section><section class="commentaire"><span class="contenu">'+temp2+'</span></section></div>'
		                
	                });
	            }
	        });
		};

J'ai un querySelector juste après le forEach, qui affecte au innerHTML de la variable selectionné la valeur str.

J'ai la fonction pas complète (elle marche de base, mais sans le chargement des images). J'ai trouvé le onerror, mais il est asynchrone, et se fait après l'affection au innerHTML. Du coup je ne sais vraiment pas comment faire, je galère depuis un moment, si quelqu'un peut m'aider ça serai top !

Merci d'avance, 

Matthieu

-
Edité par MattAmsellem 17 mai 2021 à 23:01:34

Salut,

voilà un exemple :

let txt = "blabla.png";

let regex = /[.]{1}(png|jpeg|jpg)/gi;//i pour case insensitive (majuscule et miniscule)
let res = txt.match(regex);
if ( res != null) {
  let img = new Image();
  img.onload = function(){
    //...faire qqch quand l'image est chargée
  }
  img.src = txt;
}