0
ノードでテンプレート機能を使用するのが初めてです。私は、ハンドルバーのテンプレートエンジンを使用して、ノードサーバー上で動的ビューをレンダリングしています。私は動的HTMLをレンダリングできますが、動的ソースを持つ画像のsrc属性を設定することはできません。私は、接続は、ブラウザからエラーを拒否し得る：ハンドルバーノードテンプレートを使用してimg srcを設定すると接続が拒否されました
GET uploads/CI_plot-II.png:1 GET http://localhost:8080/uploads/CI_plot-II.png net::ERR_CONNECTION_REFUSED
私は、サーバー上の静的フォルダの外に、この画像を提供しています、と私はブラウザでに移動し、それを得るとき、私はそれを見ることができるので、私はそれが存在し、生きていることを知っている。
関連するサーバ・コードは次のようになります。
var hbs = require('hbs');
...
app.engine('html', hbs.__express);
...
app.use(express.static('public'));
...
app.get("/manageResources", function(req, res, next){
//get data about a yet-to-be approve resource and send it over to the client via the view
db = createConnection()
sql = "SQL QUERY ..."
db.any(sql)
.then(function(data){
//parse the response
nestedData = parseObjectDBResponse(data)
localvars = {username: req.session.username, sessionID: req.session.id, resourceData: nestedData[0]}
console.log(localvars)
res.render('manageResources', localvars)
}).catch(function(err){
res.render("error", {error: err})
})
})
とクライアントテンプレートは次のようになります。
<body>
<div class='col-xs-12'>
<h5>References</h5>
{{#each resourceData.references}}
<li style="list-style: none" class='hangingindent'>{{this.string}}</li>
{{/each}}
</div>
<div id='image-holder' class='col-xs-6'>
<img id='theImage' src={{resourceData.fileReference}}>
</div>
</body>
</html>
私は、画像の上にdata属性を設定するようないくつかの回避策を行うことを試みたとページをjQueryでロードした後にsrcを設定しますが、それも動作しません。
私は実際に何が起こっているのか、または問題がクライアント側かサーバー側であるかどうかはわかりません。
アップデート：私は、ページを3または4回を更新した場合
、時々画像が正しく表示されます。
ブラウザで画像を表示する際に使用しているURLはありますか？おそらくあなたの動的画像パスに 'public /'プレフィックスが必要でしょうか？ – pdoherty926
ブラウザで、htmlでレンダリングできない同じURLのイメージを見ることができます。イメージにパブリックプレフィックスを追加すると修正されていないようですが、接続が拒否されたエラーの代わりに404（Not Found）が表示されます。 –