1 つのディレクトリ内に 2 つの異なるディレクトリがあります。1 つ目はviews、 などのすべての swig ビューを含むものnewpost.htmlです。もう 1 つはtemp_imagesを含むものbutterfly.pngです。
私が持っている内newpost.htmlに、
<div id="image">{{post.image}}</div> <!-- this prints `butterfly.png`-->
<img src="../temp_images/{{post.image}}"></img> <!-- shows broken img link-->
Swig はテキストを出力しますが、蝶は表示されません。理由がわからず、HTML を再確認しました。私も試しました
<img src="../temp_images/butterfly.png"></img>
そして、それもうまくいきませんでした。Swig の使用方法に問題がある可能性はありますか? Node、Express、Mongoも使用しています。
Express を使用している場合は、静的ファイルを提供するように設定した/temp_imagesディレクトリを内部に配置する必要があります。publicたとえば、app.js のどこかに次のような行が必要です。
app.use(express.static(path.join(__dirname, 'public'), { maxAge: 60*60*1000 }));
.staticExpress は Connect からこれを取得するため、ConnectJS サイトで詳細を確認できます。Connect.static doc . maxAgeブラウザにキャッシュ ディレクティブを提供します。この場合、ファイルは 1 時間有効です。
views通常、ディレクトリはテンプレート エンジンを介してのみアクセスされ、静的ダウンロードのために直接公開されることはありません (すべきではありません) 。
また、画像の URL は、サーバー上でレンダリングされるファイルに対してではなく、ブラウザーに表示される URL に対して相対的に解釈されることに注意してください (完全に並列構造である可能性があります)。私はそれについて言及します - ブラウザの開発者ツールのネットワークセクションを見ると、画像に対して行っている正確な GET リクエストを確認できます。