Autocomplete with username and image

问题

I am using autocomplete to dropdown username and user profile picture, i am getting the username correctly but profile picture is showing default images instead of the user profile picture. I do not know if i am passing this right in jquery. Here is what i have tried:

Model:

class Profile(models.Model):
    user = models.OneToOneField(settings.AUTH_USER_MODEL,on_delete=models.CASCADE,blank=True,null=True)
    profile_pic = models.ImageField(upload_to='ProfilePicture/', default="ProfilePicture/user-img.png", blank=True)

Views:

def home(request):
    all_users = User.objects.values_list('username', flat=True)
    all_img = Profile.objects.all().distinct()
context = {
    'all_users': all_users,
    'all_img': all_img,
}

Template:

<div class="ui-widget"> 
 <input type="text" name="" class="autocomplete" >
</div>

jQuery:

<script type="text/javascript">
//TAG AUTOCOMPLETE FORM DROPDOWN USER NAMES
$(function() {
  var availableTags = [
      {% for user in all_users %}
          "{{user|safe}}",
      {% endfor %}
  ];

  $(".autocomplete").autocomplete({
    source: availableTags,

}).data("ui-autocomplete")._renderItem = function (ul, item) {
 var image = "<div>{% for img in all_img %}{% if img.profile_pic %}<img src='{{ img.profile_pic.url 
}}'{% endif %}{% endfor %}" + " height='55' /> " + item.label + "</div>";

return $("<li></li>")
    .data("item.autocomplete", item)
    .append(image)
    .appendTo(ul);
};
});
</script>

来源：https://stackoverflow.com/questions/62356707/autocomplete-with-username-and-image