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

<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 "selectionné un ami". Pouvez vous m'aider SVP? Merci à vous.