title: JavaScript- "Image not found" unless I refresh the page
body: <p>I'm developing simple chat app using <code>node.js</code> for server and <code>HTML</code>,<code>CSS</code>,<code>JavaScript</code> for the client side , for each registered user I generate a gravatar depending on his email, for anonymous users (with no emails) I set a default user image.I save users' details in an array in the server so when users are logged in they see chat messages and next to them the user image or his gravatar. </p>
  
  <p>The problem is that for real time updates messages are displayed but images are not unless I refresh the page. I'm sure that the the url of the images saved in the server is legal because other wise they cannot be displayed even when refreshing the page.</p>
  
  <p>I get the follwing error :</p>
  
  <blockquote>
    <p>GET /client/undefined" Error (404): "Not found"</p>
  </blockquote>
  
  <p><strong><em>EDIT</em></strong></p>
  
  <p>server.js:</p>
  
  <pre><code>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 &gt; counter;
          });
          return messages;
      }
  ...//after checking the url 
       var newMessages = getMessages(counterFromClient);
       response.statusCode = 200;
       response.end(JSON.stringify(newMessages));
  </code></pre>
  
  <p>in client :</p>
  
  <pre><code>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 &lt; 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();
      }
  </code></pre>
  
  <p>Any idea why this is going and how can I fix it? Thanks in advance.</p>