MVC项目中HTML img标签无法正常显示问题求助

Hey Lucas, I’ve run into this exact image path issue in MVC projects before—let’s work through it step by step to get your rules.png showing up on the webpage:

1. Use MVC’s Url.Content() Helper (Most Likely Fix) #

The tilde ~ in your <img> src is a Razor-specific virtual path shortcut, but plain HTML doesn’t recognize it. That’s why your editor can resolve it (it understands Razor syntax) but the browser can’t. Replace your img tag with this:

<img src="@Url.Content("~/Content/DataTables/images/rules.png")" alt="Rules" />

Url.Content() converts the virtual path ~/ to the correct absolute path relative to your project root, which the browser can properly fetch.

2. Verify File Location & Deployment Settings #

• Double-check that rules.png is actually located in [YourProjectRoot]/Content/DataTables/images/—pay attention to filename casing (even Windows is case-insensitive, IIS or Linux deployments aren’t!).
• Right-click the image file in Visual Studio → Properties → Set Copy to Output Directory to Copy if newer or Copy always. This ensures the image gets included when you build/publish the project.

3. Diagnose with Browser Dev Tools #

Open your browser’s DevTools (F12) → Go to the Network tab → Refresh the page. Look for the rules.png request:

• If you see a 404 error: The path is still incorrect. Check the request URL shown in DevTools and adjust your src path to match the actual file location.
• If you see a 403 error: Your web server (IIS or IIS Express) doesn’t have permission to read the images folder. Grant read access to the folder for the server’s application pool user.

4. Try a Relative Path (Alternative) #

If you prefer not to use Url.Content(), you can use a relative path based on your Index.cshtml location. For example, if your view is in Views/[YourController]/Index.cshtml, the relative path would be:

<img src="../../Content/DataTables/images/rules.png" alt="Rules" />

But note: This breaks if you change your view’s folder structure or routing, so Url.Content() is the more robust option.

Fixed Code Snippet #

Here’s your updated code with the recommended fix:

<div class="col-md-6"> 
  <h2>Warunki wypozyczenia</h2> 
  <p> Kazdego wypozyczajacego obowiazuja jednakowe zasady dotyczace wypozyczonych ksiazek. 
    <br />Najwazniejsze z nich: 
    <ol> 
      <li>Nie jedz z ksiazka.</li> 
      <li>Myj rece przed czytaniem.</li> 
      <li>Nie kap sie z ksiazka.</li> 
      <li>Jesli jestes strazakiem, zostaw ksiazke w bazie przed akcja ratunkowa.</li> 
    </ol> 
  </p> 
  <img src="@Url.Content("~/Content/DataTables/images/rules.png")" alt="Rules" /> 
</div>

内容的提问来源于stack exchange，提问作者Lucas