Express generouterにて、background-image、htmlのimg=""両方とも、画像が表示されません。

Question

前提・実現したいこと

progateはやりました

一つは×印になっています


app.jsやerror.jsは、Express generouterの初期設定のまま、触ってません

発生している問題・エラーメッセージ

エラーメッセージ

エラーメッセージは特にありません

該当のソースコード

html
css
javascript

### 試したこと

画像は、右クリック→パスのコピーを貼り付けましたが、ダメでした。
text="css/javascript"としても、読み込まれませんでした。
text="text/css→type="css/text"に訂正しましたが、反映されません

＜その後＞
紛らわしいので、htmlで表示する画像は、 <img src="images/unnamed.jpg" >
background-imageで表示する画像は033_3.jpgに変更しました
img src="unnamed.jpg"の方は無事表示されましたが、033_3.jpgの背景がうまくいきません。background-image: url("..images/033_3.jpg");
background-image: url("images/033_3.jpg");
どちらの表記にしても、背景表示されません。助けてください。お願いします。

Answer 1

<img src="images/unnamed.png">

Comments

[heat]

unnamed.pngが表示されました！！ありがとうございます！！

[technocore]

app.jsファイルに以下のように指定されています。
静的ファイルはpublicディレクトリが親になります。

app.use(express.static(path.join(__dirname, 'public')));

[heat]

すみません、全く理解できてませんが勉強します

[technocore]

Progateで勉強したのではないのですか？

[heat]

app.use(express.static)はnode.jsにあったと思います、すみません
すみません、background-image: url("images/033_3.jpg");が正常に表示される方法を教えてください

Answer 2

そのejsから変換出力したhtmlファイルの場所はどこですか？
unnamed.jpgファイルはimagesディレクトリの中にあるようなので、（htmlファイルが同じディレクトリにあるのなら話は別ですが）、少なくとも images/unnamed.jpg あるいは ../images/unnamed.jpg などのようにパスを指定する必要があるでしょう。
つまりそのhtmlファイルからの相対パスを指定する必要があるということです。
（絶対パスでの指定も可能ですが、それは置いときます）

たとえばhtmlファイルがpublic直下にあるとしたら images/unnamed.jpg です。

Comments

[heat]

すみません、Express generouterの初期設定のままで、htmlファイルはないみたいなんですが、どこかに作った方が良いのでしょうか？

[itagagaki]

すみません。どうやら静的HTMLファイルではなく、動的にHTMLをレンダリングして応答するんですね。
で、そのHTMLに記述されるべき静的ファイルのパスに関してはtechnocoreさんの回答のとおりなのかと。

[heat]

つまり、background-image: url("images/033_3.jpg");が正常に表示されるにはどうすればいいですか？
publicが親というので、 background-image:url("public/images/033_3.jpg");にしましたが、これも反映されません

[itagagaki]

CSSファイルから画像ファイルを相対パスで参照する場合はそのCSSファイルの場所が起点となります。
public/stylesheets/styles.css から参照するなら public/images/033_3.jpg は ../images/033_3.jpg だと思います。

[heat]

../images/033_3.jpgで表示されました！！！ありがとうございます！！