Insertion d'une image dans une liste déroulante

Bonjour à tous

J'avais une question à vous poser. Est ce que c'est possible d'insérer une image src dans une liste déroulante. Si c'est le cas j'aimerais savoir comment l'implémenter. Je vous pose la question car sur une consigne je souhaite sélectionné une liste d'amis avec statut confirmé confirmé et insérer une image en png. J'avais essayé ceci

<!-- Liste des amis confirmés -->
<div class="container mt-5">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Liste des Amis Confirmés</h5>
          <select id="confirmedFriendsList" class="form-select">
            <option value="">Sélectionner un ami</option>
          </select>
          <button id="recommendFriendBtn" class="btn btn-primary mt-3">Recommander cet ami</button>
          <!-- Zone pour afficher l'image de l'ami sélectionné -->
          <div id="selectedFriendImage" class="mt-3">
            <img id="friendImage" src="assets/Jose.png" alt="Photo de l'ami sélectionné" style="display: none;">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Sauf que dans le navigateur l'image en png n'apparait pas quand je clique dans "sélectionné un ami". Pouvez vous m'aider SVP? Merci à vous.

Bonjour,

option n'est quasiment pas stylable. Couleur et padding dans Firefox, quasi-rien dans Chrome.
D'où l'existence de custom selects la plupart inaccessibles aux lecteurs d'écran...

Je reviens sur l'UX de ton choix : pourquoi cacher derrière un clic cette liste d'amis ? Est-ce qu'il y en a tant que ça ?
Si oui, il y a le composant Disclosure ("dropdown") qui a un comportement similaire.

Sinon avec Bootstrap, tu peux regarder du côté de List group avec custom content et des plus génériques Collapse et Dropdown.

Bonjour Felipe

En fait c'est suite à une consigne que je dois faire ça suite à un projet de réseau social mais à titre d'exemple je souhaite juste insérer 1 seule ami avec une image en png mais je n'ai pas l'intention d'en faire plusieurs.

J'ai vérifié dans des forums qu'il y aurait une possibilité mais il faudrait le faire dans le CSS?

Ah c'est l'image #friendImage que tu veux afficher dans la page suite à un événement ?
Je suppose après avoir sélectionné un choix dans le select et cliqué sur le bouton Recommander ?
Mais tu parles d'insérer : l'image est déjà dans le code HTML, cachée par

display: none;

. Y a rien à insérer dukou.
Tu veux la déplacer ailleurs (dans le select à côté de l'option sélectionnée en tout piti, ça c'est possible) ou l'afficher là où elle est (quelques lignes de JS à prévoir) ?

Je viens de te mettre en PJ une capture d'écran pour te montrer. En fait quand je clique dans "Ami a selectionné" je voudrais que l'image soit affichée là où elle est.