[SOLVED] Why does my .cshtml page not find images with local paths?

Issue

I have two variables that I use as paths for different pictures. One path is local, the other is on the internet.

The local image does not work, no matter what I do to the local path.

• I have tried putting the image in the same folder as the .cshtml
  page.
• I have tried reversing the slashes in the file-path.
• I have tried using abbreviated paths.
• I have tried to refer to it through
  @Url.Content("~/Images/Image1.png").
• I have tried putting the image file in wwwroot.

It does not work when I load the index.html in the wwwroot with the localhost, but it does work when I load the index.html with the index.html path

Put shortly: Why does path variable ‘firstImgSource’ work and not ‘secondImgSource’.

Code example

Solution

The src attribute of the img element accepts a URL, not a file path. The URL can be absolute or relative. If the image is part of your Razor Pages application, the images should be placed in the web content root, which is the wwwroot folder. Your relative path should not include "wwwroot". So if you place an image in a folder named images within wwwroot, the relative path is /images/my-image.png

Answered By – Mike Brind

Answer Checked By – Gilberto Lyons (BugsFixing Admin)