AngularでGitHub Pagesを作るときの素材のパスについて

GitHub Pagesにデプロイしたときの素材のパスの書き方

GitHubPagesで自分のポートフォリオを公開しようと思ったときにハマったので備忘録として残しておきます。

ファイル構成

src
│  index.html
│  karma.conf.js
│  main.ts
│  polyfills.ts
│  styles.css
├─app
│  │  app-routing.module.ts
│  │  app.component.css
│  │  app.component.html
│  │  app.component.spec.ts
│  │  app.component.ts
│  │  app.module.ts
│  ├─component1
│  ├─component2
│  │      component2.component.css
│  │      component2.component.html  <-ここで画像を使う
│  │      component2.component.spec.ts
│  │      component2.component.ts
│  ├─component3
│  └─component4
├─assets
│      .gitkeep
│      code-tags.svg
│      headerimages.png
│      image.png <-この画像を使う

ローカルで作っているときに動いていた画像のパスの書き方

component2.component.html

<img mat-card-image src="../../assets/image.png">

この状態でpushして見ると画像ソースが見つからず404になりました。
ので、このように変更。

component2.component.html

<img mat-card-image src="assets/image.png">

これで無事表示されました。

普段, フロント側なんてほとんどいじらないから基礎的なことも割とあやふやですぐつまづきます。