javascript - 将带有 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

@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');
        }
    }
});

Answer 2

不，这不是哈巴狗的错，哈巴狗是无辜的：）

您缺少的是“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”作为文件夹访问。