title: Angular 6 Getting Loading image error. Getting a "Failed to load resource: the server responded with a status of 404 (Not Found)"
body: <p>I have an angular project and the home page is mostly HTML. When I type "npm start", all the images successfully loads. When I typed the "npg build --base-href "/MyProject/" --prod, the home page is blank when I create its own website with a unique port. When I add website under Default Web Site, the home page loads but I see the error</p>
  
  <p>Failed to load resource: the server responded with a status of 404 (Not Found) </p>
  
  <p>for each image it is trying to load</p>
  
  <p>In the HTML code, it have the following </p>
  
  <pre><code>&lt;div&gt; &lt;div&gt;&lt;p&gt; &lt;img alt="" src="/assets/img/image123.png" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;/div&gt; &lt;/div&gt;
  </code></pre>
  
  <p>I tried added the tilda like <code>&lt;img alt="" src="~/assets/img/image123.png" /&gt;</code> but it still does not work. </p>
  
  <p>Finally, I loaded again with Chrome and hit F12. I clicked on the 404 error and see the list of images associated with the home page. On an image that has problems loading, I see the page as </p>
  
  <p><a href="http://localhost/assets/img/image123.png" rel="nofollow noreferrer">http://localhost/assets/img/image123.png</a></p>
  
  <p>The page is incorrect and will not find the image .   </p>
  
  <p>I figure if I can get the images to load under Default WebSite, then it will also load in its own website and portnumber. I am hoping the image location issue fix will fix the loading in IIS. </p>
  
  <p>I also copied/pasted the image file to the root folder where it is located in wwwroot/MyProject/image123.png. That actually loads the file when I changed the following</p>
  
  <pre><code>&lt;div&gt; &lt;div&gt;&lt;p&gt; &lt;img alt="" src="image123.png" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;/div&gt; &lt;/div&gt;
  </code></pre>
  
  <p>However, when I moved the image file to wwwroot/MyProject/assets/image123.png with the following</p>
  
  <pre><code>&lt;div&gt; &lt;div&gt;&lt;p&gt; &lt;img alt="" src="/assets/img/image123.png" /&gt;&lt;/a&gt;&lt;/p&gt;&lt;/div&gt; &lt;/div&gt;
  </code></pre>
  
  <p>it does not load the image. I tried change to the following</p>
  
  <pre><code>&lt;img alt="" src="~/assets/img/image123.png" /&gt;
  
  &lt;img alt="" src="~assets/img/image123.png" /&gt;
  </code></pre>
  
  <p>It does  not load the image file. I am not sure why it can't load the image file when it is located inside the subfolders.</p>
  
  <p>I also tried right click and give everyone full control on the assets folder. I am stumped on this one. It loads in the MyProject folder but not when I move the image file in the subfolders where img folder is located.</p>
  
  <p>Thanks                                </p>