.NET8.0で画像ファイルの表示に躓いた話

はじめに

どうもはじめまして。C#初心者のChanmoroです。
.NET8.0のMVCにおいて、画像ファイルの表示に初心者ながら躓いたので解決方法を自分用に記載します。
原因としては、相対パスで画像ファイルを指名しているのにも関わらず、画像がうまく表示されなかったというものです。まずはじめに、原因のコードとプロジェクトのファイル構成です。

プロジェクトの詳細

フォルダ構成

/YourApp
  /www.root
  /Controllers
  /Models
  /Views
    /Home
      Index.cshtml
  /Resources
    /img
      example.png

他にもフォルダは存在していますが、今回の説明で使用するものを主に列挙しました。(この段階でなぜ画像ファイルが読み込めないかわかる人もいるかも）

Index.cshtml

@{
    ViewData["Title"] = "Start";
}

<!--問題の箇所 ここから-->
<!--slide-->
<ul class="slick">
    <li><img src="../Resources/img/slide01.jpg" alt="logo" /></li>
    <li><img src="../Resources/img/slide02.jpg" alt="logo" /><img alt="画像1" src="" /></li>
</ul>
<!--問題の箇所 ここまで-->

<div class="text-white text-center mt-4">
    <button class="bg-white text-blue-600" id="login-button">Login / ログイン</button><br>   
    <a class="mt-2">Resister / 新しいアカウントを作成</a>
</div>

<!--jQuery and Stick-->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

<script>
    $('.slick').slick();
</script>

今回の画像ファイルの問題個所はコメントアウトしてある箇所です。プロジェクト内にResourcesフォルダを新規作成して、その中にimgフォルダを作成し、そこに画像ファイルを配置しています。(ややこしいですが)

解決策 ：　静的ファイルはwwwrootフォルダ内に置く

完全に素人の私は、通常のhtmlと同じようにどのフォルダでも呼び出せるものだと思って、相対パスを設定しました。C#のMVCプロジェクトにおいては、写真ファイルなどの静的ファイルはwwwrootフォルダ内に配置する必要性があるようです。

/YourApp
  /www.root
    /css
    /js
    /lib
+    /Resources
+      /img
+        /example.png
  /Controllers
  /Models
  /Views
    /Home
      Index.cshtml
-  /Resources
-    /img
-      example.png

Index.cshtml

<!--問題の箇所 ここから-->
<!--slide-->
<ul class="slick">
    <li><img src="~/Resources/img/slide01.jpg" alt="logo" /></li>
    <li><img src="~/Resources/img/slide02.jpg" alt="logo" /><img alt="画像1" src="" /></li>
</ul>
<!--問題の箇所 ここまで-->