如何不断更新HTML标签以从EJS和后端获取值？

Question

我对前端有一个非常基本的要求，我想每秒更新传入的图像，但我不确定如何做到这一点...

以下是我要更新值的标签 -

    <img id="receivedImage" src="<%= imageData %>" alt="Received Frame">

它从后端接收数据 -

app.get('/receiver', function(req, res) {
    res.render('receiver', { imageData: receivedFrameData });
});


wss.on('connection', function connection(ws) {
    console.log('Client connected.');

ws.on('message', function incoming(imageData) {
    console.log('Received frame from client.');
    console.log(imageData);
    receivedFrameData = imageData;
    
    socketio.emit('frame', imageData); // Emit the frame data using Socket.IO
});

ws.on('close', function close() {
    console.log('Client disconnected.');
});

});

目前我正在刷新整个页面以重新渲染新的

src

，但这似乎是一种非常破旧的方法。有人可以指导我吗？

Answer 1

要动态更新图像而不刷新整个页面，可以使用 JavaScript 定期更新图像标签的 src 属性。 HTML：

<img id="receivedImage" src="<%= imageData %>" alt="Received Frame">

JavaScript：

function updateImageSource() {
    fetch('/receiver')
        .then(response => response.text())
        .then(imageData => {
            document.getElementById('receivedImage').src = imageData;
        })
        .catch(error => {
            console.error('Error fetching image data:', error);
        });
}

// Update the image source every second
setInterval(updateImageSource, 1000);