websocketでpugファイルに画像を追加しています

Question

私はnode.jsで小さなアプリケーションを作成していて、問題が発生しました。管理者アカウントからすべてのユーザーにimgを送信しようとしています。問題は、私が作ったdivに追加するjavascriptを使って私のイメージを表示するように見えないことです。それは私のイメージを表現していないpugと一緒に働いているからですか？

私の管理者側

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

いや、それはパグは、この犯罪の無実である、パグのせいではありません:)

あなたの周りに引用符いる「画像/ 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」にフォルダとしてアクセスしようとしているからです。悲しいこと:(いずれか

を動作しませんでしたaperçu@

Answer 2

しかし、私は解決策を見つけました！それは私がimg要素を作成する必要がありましたし、それをこの方法を行うようだ、私は正確にわからなぜ

NTOよ

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