使用websockets将图像附加到pug文件

Question

我正在使用node.js创建一个小应用程序并且偶然发现了一个问题。我正在尝试从我的管理员帐户向所有用户发送img。问题是我似乎无法通过附加到我制作的div的javascript来显示我的图像。是因为我和帕格一起工作，它不能渲染我的形象吗？

我的管理员

document.querySelector('#Function1').addEventListener("click", function (e) {
  alert('hi mom');

  primus.write({message: 'function1'});
  //console.log(id);
  e.preventDefault;
});

我的客户端

var image = "images/logo.png";

primus.on("data", function (data) {
  if (data.message != undefined) {
    if (data.message == 'function1') {
      document.querySelector("#functionShow").append("<img src="+image+"/>");
    } else {
      console.log('something went wrong');
    }
  }
});

这是显示的最终结果

welkom Hanna

<img src=images/logo.png/>

Answer 1

不，这不是哈巴狗的错，帕格是无辜的犯罪：）

你所遗漏的是“images / logo.png”周围的引号，它应该是

var image ="images/logo.png";

primus.on("data", function (data) {
  if (data.message != undefined) {
    if (data.message == 'function1') {
      document.querySelector("#functionShow").append('<img src="'+image+'"/>');
    } else {
      console.log('something went wrong');
    }
  }
});

这是因为浏览器现在尝试将“logo.png”作为文件夹访问。

Answer 2

@aperçu这可悲的是也没有用:(

但我确实找到了解决方案！看来我必须创建一个img元素并以这种方式执行，我不知道为什么

var elem = document.createElement("img");
elem.setAttribute("src", "images/logo.png");
elem.setAttribute("alt", "logo");

var elem2 = document.createElement("img");
elem2.setAttribute("src", "images/header.png");
elem2.setAttribute("alt", "logo");

primus.on("data", function (data) {
    if(data.message != undefined) {
        if(data.message == 'function1') {
            document.querySelector("#functionShow").append(elem);
        }if(data.message == 'function2') {
            document.querySelector("#functionShow").append(elem2);
        }
        else {
            console.log('i fucked up');
        }
    }
});