1

what is the best location for image folder in asp.net mvc C# project so that it is easily access in all css scripts. Currently I've used ....

  • Image Path:Content/Images

  • css file Path:**Content/dist/css

    <img src="@Url.Content("../Content/Images/logo.png")>

    worked well for all view Pages. Also

    background-image:url(../Content/Images/logo.png);

    worked well for Home/Index page. BUT when i call other pages .....

    background-image:url(../Content/Images/logo.png);

    not Worked at all !! Also

      background-image: url('data:image/jpeg;base64........)

    worked on all Pages

Improve this question
3
  • 3
    ASP.Net MVC or ASP.Net MVC Core? Static images (I guess so) or images users can upload? Commented Mar 13, 2019 at 7:23
  • 1
    There is no "proper" location, only convention that sees most people place images referenced by CSS inside the "Content/Images" folder. Commented Mar 13, 2019 at 7:32
  • background-image: url('@Url.Content("~/Content/images/logo.png")') worked as inline css Commented Mar 13, 2019 at 10:19

2 Answers 2

Reset to default
3

Normally in MVC images are located in an Images folder inside Content folder.

And you can load the image by <img src="@Url.Content("~/Content/Images/imagename.extn")" />

But Where you place your images is really up to you.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

<<img src="@Url.Content("../Content/Images/logo.png")" >> worked well for all view Pages. Also background-image:url(../Content/Images/logo.png); worked well for Home/Index page. BUT when i call other pages ..... background-image:url(../Content/Images/logo.png); not Worked at all !!
try background-image: url(Images/logo.png);
stackoverflow.com/a/9822040/5182321
url(Images/logo.png); not Worked at all !!
Finally I've used ... background-image: url('data:image/jpeg;base64........) It's worked on all Pages.
2

Image Folder:

In ASP.Net MVC Core by default they are in /wwwroot/images. In ASP.Net MVC (non-core) they are in /images or in /assets/images.

The images need to be deployed on the server. In ASP.Net Core the wwwroot is the right location to put your static resources into that later gets deployed.

Image references in CSS:

About referencing the images in your CSS files: Note that it doesn't really matter where the images are as long as they are deployed on the server and are accessible from the CSS. To do you will add some Url() reference to your CSS. The important part here is that these Urls are relative to the CSS file. If reference the same image from multiple CSS files and these CSS files are in different folders the Url you need is different per CSS file.

Example:

  • /images/logo.png
  • /css/site.css => Url(../images/logo.png)
  • /css/subsite/bluetheme.css => Url(../../images/logo.png)
Improve this answer

2 Comments

Image Path:Content/Images ,css file Path:Content/dist/css <img src="@Url.Content("../Content/Images/logo.png")" > worked well for all view Pages. Also background-image:url(../Content/Images/logo.png); worked well for Home/Index page. BUT when i call other pages ..... background-image:url(../Content/Images/logo.png); not Worked at all !!
The Url(...) are relative to the CSS file. They are not dynamic and can not UrlHelpers etc. if you have them in separate CSS files. Did you place the CSS in your page or in a .CSS file? I suggest place it in external CSS files. Then you reference the images with a relative path from CSS.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.