Сохранить изображение как blob и отобразить в html

Я столкнулся с проблемой при создании сайта.

• язык: php, js, html
• СУБД: mysql

Что я пытаюсь сделать

1. загрузить аватар пользователя (изображение) из базы данных, которая хранится в виде большого двоичного объекта в записи пользователя
2. заставить его отображаться на моей веб-странице html

На веб-сайте:

1. загрузка пользователем изображения в качестве аватара достигается путем

<input id = "avatar" type = "file" />

const avatar = document.getElementById('avatar');

$.ajax({
    url: '../php/action.php',
    method: 'POST',
    data: `image=${avatar.value}&action=uploadAvatar`
});

2. в пользовательском классе

class User{ 
    protected $id;
    protected $avatar; // blob
    // ...

    function setId($id) { $this->id = $id; }
    function getId() { return $this->id; }
    function setAvatar($avatar) { $this->avatar = $avatar; }
    function getAvatar() { return $this->avatar; }
    // ...
}

3. аватар сохраняется только при создании записи. какой пользователь может установить аватар только при регистрации.

function dummy_user($image){
    $user1 = new User(); 
    $user1->setAvatar($image);
    // ...
}

dummy_user($_POST['image']);

в пользовательском классе sql анализируется и выполняется как:

$sql = "INSERT INTO `user` (`id`, `avatar` ...) VALUES ('" . strval($this->getId()) . "', '" . $this->getAvatar() . " ... ')";
// some other values are omitted by ellipsis 

4. загрузить запись из базы данных

// exceptions and error handling are omitted
$stmt = $this->conn->prepare('SELECT * FROM `user` WHERE id = ' . strval($id) . '');
$stmt->execute();
return $stmt->fetch(PDO::FETCH_ASSOC);

5. однако для результата, собранного в javascript

$.ajax({
    url: '../php/action.php',
    method: 'POST',
    data: "id=1&action=loadUser"
}).done(function(result){
    var res = JSON.parse(result);
    console.info(res);
});

Я получаю это:

{"id":"1","avatar":"C:fakepathhusky.png" ...}

есть несколько вещей, о которых стоит упомянуть:

• Поле аватара таблицы пользователя базы данных установлено как большой двоичный объект. Начальный размер изображения перед загрузкой 349kb

• после загрузки в базу данных большой двоичный объект становится 19b

• название изображения: husky.png

6. чтобы отобразить изображение на html-странице

// result collected from php by ajax
var res = JSON.parse(result);
let img = document.createElement('img');
img.setAttribute('src', 'data:image/png;base64,' + btoa(res.avatar));

Я закончил с неудачей. Ожидаемый результат - получить изображение, отображаемое на странице html. Любое предложение будет оценено.