Tutorialsteacher

Follow Us

Articles
  • C#
  • C# OOP
  • ASP.NET Core
  • ASP.NET MVC
  • LINQ
  • Inversion of Control (IoC)
  • Web API
  • JavaScript
  • TypeScript
  • jQuery
  • Angular 11
  • Node.js
  • D3.js
  • Sass
  • Python
  • Go lang
  • HTTPS (SSL)
  • Regex
  • SQL
  • SQL Server
  • PostgreSQL
  • MongoDB
Entity Framework Extensions - Boost EF Core 9
  Bulk Insert
  Bulk Delete
  Bulk Update
  Bulk Merge
  • All
  • C#
  • MVC
  • Web API
  • Azure
  • IIS
  • JavaScript
  • Angular
  • Node.js
  • Java
  • Python
  • SQL Server
  • SEO
  • Entrepreneur
  • Productivity

How to set image path with StyleBundle

In this article, you will learn how to resolve an absolute path in a css file.

We learned in the MVC tutorial that the Include() method of the Bundle class accepts a filename with a virtual path.

Resolve image path with stylebundle

If you open the browser debugger, you can see that the css file has been loaded with Status 200.

Resolve image path with stylebundle

However, if the site.css contains images with an absolute path, then the images will not load. For example, our following site.css contains footer style as shown below.

site.css
footer
{
    background:url(../images/border_btm.png) top repeat-x;
    padding:15px;
    color:#618eac;
    margin-top:15px;
}

The above footer style references the background image, which is in the separate images folder.

Resolve image path with stylebundle

However, the browser will give the 404 error because it could not find the image file.

Resolve image path with stylebundle

The browser will consider the virtual path for any path given in the css file. It will try to load the image from hosting server.

Resolve image path with stylebundle

Solution:

If you use an absolute path in your css for images then you can specify the transformation class CssRewriteUrlTransform.

The CssRewriteUrlTransform class rewrites urls to absolute paths.

Example: Specify CssRewriteUrlTransform
bundles.Add(new StyleBundle("~/bundles/css").Include(
                    "~/Content/css/site.css",
                    new CssRewriteUrlTransform()
                ));

Now, the image path in the css file will be transformed into an absolute path.

Resolve image path with stylebundle

As you can see in the above figure, the image is loaded using an absolute path from the root folder.

TUTORIALSTEACHER.COM

TutorialsTeacher.com is your authoritative source for comprehensive technologies tutorials, tailored to guide you through mastering various web and other technologies through a step-by-step approach.

Our content helps you to learn technologies easily and quickly for learners of all levels. By accessing this platform, you acknowledge that you have reviewed and consented to abide by our Terms of Use and Privacy Policy, designed to safeguard your experience and privacy rights.

[email protected]

ABOUT USTERMS OF USEPRIVACY POLICY
copywrite-symbol

2024 TutorialsTeacher.com. (v 1.2) All Rights Reserved.