src изображения не изменяется, когда пользователь снова загружает изображение (socket.io)

Question

Я использую этот модуль для загрузки изображений через socket.io.
Вот код на стороне клиента:

<img src="/img/avatar-2-128.png" alt="" id="signinbox_photo"> //avatar-2-128.png is an avatar that will be replaced
<input type="file" id="siofu_input" />


//upload the image to the server
var uploader = new SocketIOFileUpload(socket);
uploader.listenOnInput(document.getElementById("siofu_input"));

socket.on('update photo', function(data){ //update the src attr of the img tag
    var signinbox_photo = $('#signinbox_photo');
    signinbox_photo.attr("src",`/img/user_images/${data.id}.jpg`);
});

Серверная сторона:

var fs = require('fs');
var siofu = require("socketio-file-upload");

io.sockets.on('connection', function(socket) {
    var uploader = new siofu();
    var dir = "./public/img/user_images/"
    uploader.dir = dir;
    uploader.listen(socket); //save the file

    uploader.on("saved", function(event){
        fs.rename(dir + event.file.name, dir + socket.id + ".jpg", function(err) { //replace the file name to socket id
            if ( err ) console.log('ERROR: ' + err);
        });
        io.sockets.emit('update photo', {id: socket.id}) //emit to client so it updates the src of the image
    });

});

Когда пользователь загружает изображение, оно работает, и все идет так, как ожидается, но когда пользователь загружает снова, он заменяет файл на сервере, но не обновляет src изображения на клиенте. Любое предложение будет оценено. Спасибо.

Answer 1

Это происходит потому, что каждый раз, когда вы загружаете изображение, имя изображения одно и то же, и браузер не может не знать, что вы загрузили другое изображение с тем же именем. Хотя есть обходной путь. Вы можете добавить случайное число в качестве параметра запроса при назначении src на стороне клиента следующим образом:

//upload the image to the server
var uploader = new SocketIOFileUpload(socket);
uploader.listenOnInput(document.getElementById("siofu_input"));

socket.on('update photo', function(data){ //update the src attr of the img tag
    var signinbox_photo = $('#signinbox_photo');
    signinbox_photo.attr("src",`/img/user_images/${data.id}.jpg?r=${Math.random()}`);
});