Object of type ImageFieldFile is not JSON serializable

Question

前提・実現したいこと

djangoのajaxを用いて、投稿されたコンテンツに、ページを更新せずにコメントを送信できるようにしようと考えています。
コメント内容とコメントしたユーザー名は表示できます。
しかし、　
コメントした人のプロフィール画像が、表示しようとすると、”Object of type ImageFieldFile is not JSON serializable”というエラーが発生します。

そのため、
実現したいことは、ページ更新せず、コメントした人のプロフィール画像を表示したいです。

もしわかる方が、いましたらご教授お願い致します。
また情報不足でしたら、コメントお願いします。

発生している問題・エラーメッセージ

Object of type ImageFieldFile is not JSON serializable

該当のソースコード

def show(request, pk):
    content = get_object_or_404(Content, pk=pk)
    comments = comments = Comment.objects.filter(content=content)
    params = {
    'content': content,
    'comments': comments,
    }
    return render(request, 'templates/show.html', params)

def comment_btn(request):
    if request.method == 'POST':
        content = get_object_or_404(Content, pk=request.POST.get('content_id'))
        owner = request.user
        comment = request.POST.get('comment')
        new = Comment(
            content=content,
            owner=owner,
            comment=comment,
        )
        new.save()
        
        params = {
            'content_id': content.id,
            'comment': new.comment,
            'username': new.owner.username,
            'avatar': new.owner.avatar,
        }
        if request.is_ajax():
            return JsonResponse(params)

{% for comment in comments %}
    <div id="comment_user">
         <img src="/media/{{ comment.owner.avatar }}">
         {{ comment.owner.username }}
         {{ comment.comment }}
    </div>

{% endfor %}
<div id='comment_info'>

</div>

<form action="{% url 'content:comment_btn' %}" method="POST">
      {% csrf_token %}
      <input type="text" id="comment_input">
      <button type="submit"  id="comment" class="btn btn-white">
          <i class="fas fa-lg fa-comment"></i>
      </button>
</form>
<script>
$(document).ready(function(event){
    $(document).on('click', '#comment', function(event){
        event.preventDefault();
        $.ajax({
            type: 'POST',
            url: "{% url 'content:comment_btn' %}",
            data: {
                'content_id': '{{ content.pk }}',
                'comment': $('#comment_input').val(),
                'csrfmiddlewaretoken': '{{ csrf_token }}',},
            dataType: 'json',
            success: function(response){
                $('#comment_input').val('');
                $('#comment_info').append('<p>' + response.comment + '</p>');
                $('#comment_info').append('<p>' + response.username + '</p>');
                $('#comment_info').append('<img src="/media/' + response.avatar + '">');
            }
        });
    });
});

</script>

class CustomUser(AbstractUser):
    username = models.CharField(unique=True, max_length =25)
    email = models.EmailField(unique=True)
    avatar = models.ImageField(
        upload_to='avatar/',
    )

class Content(models.Model):
    owner = models.ForeignKey(CustomUser, on_delete=models.CASCADE)
    title = models.CharField(max_length=100)
    upload = models.FileField(
        upload_to='files/',
        validators=[FileExtensionValidator(['mp4', 'webm'])]
    )
class Comment(models.Model):
    owner = models.ForeignKey(CustomUser, on_delete=models.CASCADE)
    content = models.ForeignKey(Content, on_delete=models.CASCADE)
    comment = models.CharField(max_length=250)

Answer 1

エラーの意味は、ImageFieldFileはJSON形式にできないということです。
よって、ビューのparamsの中の
'avatar': new.owner.avatar,
を
'avatar_url': new.owner.avatar.url,
に変更しましょう。これで画像ファイルのパスが渡されます。

あとimgタグurlの先頭に/media/はつけなくて大丈夫だと思います。

Comments

[shuring]

いけました！
ありがとうございます！