Ajaxを使用して画像を表示させる方法

Question

Ajaxを使用して画像を表示させる方法が知りたいです。

下記のように文字でLike or UnLikeの表示はできたのですが、textの場所を画像に変更したいのですが、どうすればいいのでしょうか？
https://icons.getbootstrap.com/icons/heart/
上記リンクの画像を入れたいと思っているのですが可能でしょうか？

textの箇所を変更すると思いますが、調べ方が分からず質問いたしました。
よろしくお願いいたします。

    <script>
            $('.like-form').submit(function(e){
                e.preventDefault()
                
                const post_id = $(this).attr('id')
                
                const likeText = $(`.like-btn${post_id}`).text()
                const trim = $.trim(likeText)

                const url = $(this).attr('action')
                
                let res;
                const likes = $(`.like-count${post_id}`).text()
                const trimCount = parseInt(likes)
                
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: {
                        'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
                        'post_id':post_id,
                    },
                    success: function(response) {
                        if(trim === 'Unlike') {
                            $(`.like-btn${post_id}`).text('Like')
                            res = trimCount - 1
                        } else {
                            $(`.like-btn${post_id}`).text('Unlike')
                            res = trimCount + 1
                        }

                        $(`.like-count${post_id}`).text(res)
                    },
                    error: function(response) {
                        console.log('error', response)
                    }
                })
            })
    </script>

追記
アイコン部分の処理

			<div class="card-content">
                <form action="{% url 'app:like-post-view' %}" method="POST" class='like-form' id='{{item.id}}'>
                    {% csrf_token %}
                    <input type="hidden" name="post_id" value={{item.id}}>
                        <button type="submit" class="ui button like-btn{{item.id}}">
                            {% if user not in item.liked.all %}
                                <i class="bi bi-heart"></i><div class="like-count{{item.id}}"></div>
                            {% else %}
                                <i class="bi bi-heart-fill like"></i><div class="like-count{{item.id}}"></div>
                            {% endif %}
                        </button>
                </form>
                <div class="like-count{{item.id}}">{{item.num_likes}}</div>
                {% if item.post_user.icon %}
                <a href="#" class="card-link" href="{% url 'app:user_detail' item.post_user %}">
                <img src="{{ item.post_user.icon.url }}" width="20%">
                {% endif %}
                {{ item.post_user }}
            </a>
            </div>  

Comments

[m.ts10806]

アイコンフォントなら既定の取り込み方は書かれてると思いますが、あえて外部から取得するのはなぜでしょう

Answer 1

text()で書き換えている文字をhtml($('<img>'))的な処理にしてみては？

Answer 2

他の方の回答にもありますが、 .text('Like') のように設定している部分を .html('ハートアイコンのタグ') に変えればよいです。

Like / Unlike の状態に応じて画像を切り替えるサンプルを以下に示します。

    if(trim === 'Unlike') {
-       $(`.like-btn${post_id}`).text('Like')
+       $(`.like-btn${post_id}`).html('<i class="bi bi-heart"></i>')
        res = trimCount - 1
    } else {
-       $(`.like-btn${post_id}`).text('Unlike')
+       $(`.like-btn${post_id}`).html('<i class="bi bi-heart-fill"></i>')
        res = trimCount + 1
    }

続いて、if の処理を見直します。
先ほどの修正で「Like」「Unlike」の文字を消したため、 if(trim === 'Unlike') の判定が狂ってしまいます。
ですので、追加で以下のような修正を加えます。

(1) ハートアイコンに「like」クラスを追加
(2) 「like」クラスの有無で処理を分岐させる

-   const likeText = $(`.like-btn${post_id}`).text()
-   const trim = $.trim(likeText)
+   const hasLike = $(`.like-btn${post_id}`).find('i').hasClass('like')

    (中略)

-   if(trim === 'Unlike') {
+   if(hasLike) {
        $(`.like-btn${post_id}`).html('<i class="bi bi-heart"></i>')
        res = trimCount - 1
    } else {
-       $(`.like-btn${post_id}`).html('<i class="bi bi-heart-fill"></i>')
+       $(`.like-btn${post_id}`).html('<i class="bi bi-heart-fill like"></i>')
        res = trimCount + 1
    }

ちなみに、質問文には submit 時の javascript しか載っていませんが、初期表示のときの HTML も
<i class="bi bi-heart"></i>
または
<i class="bi bi-heart-fill like"></i>
を表示するように直さなければなりません。

--

以上です。
何か分からないことなどあれば、またコメントください。

Comments

[Mario_11]

知識不足のため回答された処理が分からず止まっていたので助かりました！
無事動かす事が出来ました！ありがとうございます！

一つ質問がございます。
ボタンの中にアイコンが入っていのですが、見た目を良くするためボタンを消したり、アイコンだけの表示で動かすことを可能でしょうか？

[shinoharat]

可能です。
例えば、以下の記事の方法を使えば、ボタンの見た目を普通の文字みたいにできます。

button要素のcssをリセットしたい - Qiita
https://qiita.com/nabettu/items/1593af04e48444c45c53

もちろん、このままだと、すべてのボタンの見た目が変わってしまいますから、適用範囲を限定させる工夫は必要です。

CSS の知識があれば簡単です。
もし無いなら・・・頑張って勉強してください。
とりあえずチャレンジしてみて、どうしても難しかったらまた別途質問を投稿されると良いでしょう。

[shinoharat]

別案ですが、

(1) 画面上にはアイコンだけ表示しておく
(2) 「アイコンがクリックされたとき、 from の submit イベントを発火させる」という javascript を書く

という方法もあります。
（こっちの方がメジャーなやり方かも？）

お好きな方でどうぞ。

[Mario_11]

ありがとうございます！別案のメジャーなやり方を作っていきたいと思います。
解説いただきありがとうございました。