javascript - jQuery - img src 内の変数が未定義を返す

Question

わかりましたので、次のような AJAX 呼び出しがあります (重要でないコードは省略しています)。

 function updateChat(){

    var userAvatar = $('.user-avatar').val();

    $.ajax({
       type: "POST",
       url: "index.php",
       data:{
           "AJAX": 'support-chat-process'
       },
       dataType: "JSON",
       success: function(data){

           var append ='somehtml';
           alert(userAvatar); // works!
           append += '<img src="' + userAvatar + '" height="30" width="30">'; 
           append += '<p>'+userAvatar+'</p>'; // also works!

           $('body').append(append);

       }
    });
}

ご覧のとおり、ドキュメントに HTML IMG タグを追加する変数内の非表示の入力フィールドから値を取得しようとしています。

そのフィールドから取得した値 (userAvatar に入力した値) は正しいです。トラブルコードの前後に変数を警告すると、正しい文字列も出力されます。

変数をタグ内に配置すると、<p>それも機能します。

ただし、上記のようにIMG srcに変数を追加すると、ドキュメントに追加されるとsrc内に「未定義」が表示されます。

したがって、私のhtmlでは次のようになります。

      <img src="undefined" height="30" width="30">

理由がわかりません、何かアイデアはありますか？ここに表示されているコード以外の変数には触れていません。