Pourquoi mes images sont-elles cassées lors de l'utilisation de MVC4 StyleBundles ?

MVC4 StyleBundle résolvant le problème des images

Un problème survient lors de l'utilisation du StyleBundle de MVC pour combiner des fichiers CSS et des références d'images externes dans des sous-dossiers. Lors de la définition d'un bundle à l'aide d'un chemin virtuel qui ne correspond pas à un chemin de contenu physique, les chemins relatifs des images dans les fichiers CSS sont rompus.

Solution

La bonne approche consiste à définir le bundle sur le même chemin que les fichiers source en cours de combinaison. Par exemple :

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                    .Include("~/Content/css/jquery-ui/*.css"));

En définissant le bundle sur le même chemin que les fichiers CSS sources, les chemins relatifs des images restent valides. En effet, la dernière partie du chemin du bundle sert effectivement de nom de fichier pour le fichier CSS groupé.

Solution alternative

Comme suggéré par Hao Kung, une approche alternative consiste à utiliser une CssRewriteUrlTransformation pour réécrire les références d'image dans le fichier CSS fourni :

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                    .Include("~/Content/css/jquery-ui/*.css",
                     new CssRewriteUrlTransform()));

Cette transformation modifiera automatiquement les références relatives chemins d'image pour garantir qu'ils pointent vers l'emplacement correct après le regroupement.

Remarque

Lors de l'utilisation de CssRewriteUrlTransformation, il est important d'être conscient des problèmes potentiels liés à la réécriture des chemins absolus dans un répertoire virtuel. Ce comportement peut ne pas convenir à tous les scénarios.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!