使用捆绑软件配置时如何在Razor中正确渲染图像路径

Question

BundleConfig.cs snippet

    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/bundles/css").Include(
                    "~/content/themes/base/jquery.ui.core.css",
                    "~/content/themes/base/jquery.ui.theme.css"
    }

_Layout.cshtml snippet

@Styles.Render("~/bundles/css")

jquery.ui.theme.css snippet

    url(images/ui-bg_flat_75_ffffff_40x100.png)

Firebug reports that the image (my_app_path) / bundles / images / ui-bg_flat_75_ffffff_40x100.png` 404 not found.

How can I tell Razor that the correct path is actually (my_app_path) / content / themes / base / images / ui-bg_flat_75_ffffff_40x100.png`?

EDIT: ELMAH spits this error for the same issue:

System.Web.HttpException: The controller for path ' / bundles / images / ui-bg_flat_75_ffffff_40x100.png' was not found or does not implement IController.

Answer 1

This is happening because your CSS files aren't being rewritten to transform their relative paths. You can make this happen by changing to the following:

bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/content/themes/base/jquery.ui.core.css",
                "~/content/themes/base/jquery.ui.theme.css",
                new CssRewriteUrlTransform()));