JavaScript- "Image not found"除非我刷新页面

Question

我正在开发简单的聊天应用程序，使用 node.js 作为服务器，使用 HTML、CSS、JavaScript 作为客户端，对于每个注册用户，我根据他的电子邮件生成一个头像，对于匿名用户(没有电子邮件)，我设置一个默认用户图像。我将用​​户的详细信息保存在服务器的数组中，这样当用户登录时，他们会看到聊天消息，并在其旁边显示用户图像或其头像。

问题是，实时更新消息会显示，但图像不会显示，除非我刷新页面。我确信服务器中保存的图片的url是合法的，否则即使刷新页面也无法显示。

我收到以下错误:

GET /client/undefined" Error (404): "Not found"

编辑

服务器.js:

function addMessage(message) {   
    var m = (message); 
    if (m.email === "" || m.email===undefined) {
        gravatar = "/client/images/user.png";
    } else {
        var userimg= globalVar.usersList.findIndex(function (element) {
            return element.email === m.email;
        });
        gravatar=globalVar.usersList[userimg].gravatar;
    }
    var newMessage = {
        name: m.name,
        email: m.email,
        gravatar: gravatar,
        message: m.message,
        timestamp: m.timestamp,
    }
    globalVar.messagesList.push(newMessage);
}



function getMessages(counter) {
        var messages = [];

        messages = globaVar.messagesList.filter(function (element) {
            return element.id > counter;
        });
        return messages;
    }
...//after checking the url 
     var newMessages = getMessages(counterFromClient);
     response.statusCode = 200;
     response.end(JSON.stringify(newMessages));

在客户端:

getMessages(window.Babble.msgCounter, function (res) {
            var newMessages = JSON.parse(res), i;
            var chatList = document.getElementsByTagName('ol')[0];
            var listItem, contDiv, imageDiv, userImage, msgDiv, ct, tm, btn, spn;
            for (i = 0; i < newMessages.length ; i++) {
                listItem = document.createElement('li');

                contDiv = document.createElement('div');

                imageDiv = document.createElement('div');
                imageDiv.setAttribute("class", "user-image-div");
                userImage = document.createElement('img');
                userImage.setAttribute("alt", "");
                userImage.setAttribute("class", "user-image");
                userImage.setAttribute("src", newMessages[i].gravatar);
                userImage.setAttribute("style", "background: white; border: solid 1px #d7d7d7;");
                imageDiv.appendChild(userImage);

                msgDiv = document.createElement('div');
                msgDiv.setAttribute("class", "message-on-chatboard");
                msgDiv.setAttribute("tabindex", "0");

                ct = document.createElement('cite');
                ct.setAttribute("class", "username");
                ct.innerHTML = newMessages[i].name;

                tm = document.createElement('time');
                tm.setAttribute("class", "time");
                var date = new Date(newMessages[i].timestamp * 1000);
                var hours = date.getHours();
                var minutes = "0" + date.getMinutes();
                tm.innerHTML = hours + ":" + minutes;

                btn = document.createElement('button');
                btn.setAttribute("class", "close");
                btn.setAttribute("aria-label", "delete message");
                btn.setAttribute("tabindex", 0);
                btn.setAttribute("id", "msg" + newMessages[i].id);

                spn = document.createElement('span');
                spn.setAttribute("class", "message-content");
                //console.log(typeof (newMessages[i].message));
                spn.innerHTML = newMessages[i].message;

                msgDiv.appendChild(ct);
                msgDiv.appendChild(tm);

                contDiv.appendChild(imageDiv);
                contDiv.appendChild(msgDiv);
                //append list Item
                listItem.appendChild(contDiv);
                chatList.appendChild(listItem);

            }

function  getMessages(msgCounter, callback) {

        var httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState === 4) { // request is done
                if (httpRequest.status === 200) { // successfully
                    //console.log(httpRequest.responseText);
                    callback(httpRequest.responseText); // we're calling our method
                }
            }
        };
        httpRequest.open('GET', "http://localhost:8080/messages?counter=" + msgCounter);
        httpRequest.send();
    }

知道为什么会出现这种情况以及如何解决它吗？提前致谢。

Answer 1

没有代码但看到错误很难知道

GET /client/undefined" Error (404): "Not found"

看来您用于获取图像的变量未定义(未定义)，因此请先验证一下。