Bonjour à tous

J'affiche une image de la sorte:
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
 
<figure>
				<img id="banner" src="http://www.site.ch/manager/templates/dix-lunes/img/banner/25-banner.jpg" class="img-fluid" alt="Contact" title="Contact" />
			</figure>

Ce que j'essaye de faire est lorsque que la largeur de mon navigateur est plus petite que 580px, l'image est remplacée par
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
 
<figure>
				<img id="banner" src="http://www.site.ch/manager/templates/dix-lunes/img/banner/25-phone_banner.jpg" class="img-fluid" alt="Contact" title="Contact" />
			</figure>
soit avec ou pas
phone_
Je ne vois pas comment je peux rechecher une partie de caractère dans src.

Je dois chercher
banner.jpg et le remplacer par phone_banner.jpg, et dans l'autre cas, je dois faire l'inverse
Code JQUERY : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
 
$( window ).resize(function() {
	if($(window).width()) < 580){
	}else{
 
	}
});

L'autre problème que je vois est quand je redimenssionne mon navigateur entre <400 et 580, banner.jpg n'existera plus, donc, il ne faut pas qu'il cherche une chaine de caractère qui a déjà été chagée.

Je ne sais si je m'y prend de la bonne manière. Je pourrais utiliser
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
 
@media screen and (max-width: 579px) {
}
mais vu que mon image n'est pas afficher avec du CSS et que je ne la mets pas en background, je ne vois pas d'autres moyens que jquery, non?

Merci pour vos lumières