Comment puis-je résoudre les problèmes de chemin d'image lors du regroupement de fichiers CSS dans des ensembles de styles MVC4 ?

Complexité de résolution d'image MVC4 StyleBundle

Les capacités de regroupement de MVC4 offrent une solution pratique pour optimiser les applications Web. Cependant, la gestion des images dans les bundles CSS pose un défi unique, car les chemins relatifs des images dans les fichiers CSS peuvent être rompus lors du regroupement.

Comme mentionné dans une question similaire, conserver les chemins relatifs des images d'origine pendant le regroupement peut être obtenu en spécifiant un chemin virtuel pour les StyleBundles qui n'entre pas en conflit avec les chemins de contenu physique existants. Dans ce cas, le chemin du bundle est spécifié comme "/Content/styles/jquery-ui", ce qui est différent du chemin réel "/Content/css/jquery-ui" contenant les fichiers CSS et les images.

Cependant, cette approche conduit à des chemins d'image brisés dans le navigateur. Le navigateur demande l'image par rapport au fichier CSS fourni, ce qui entraîne une erreur 404.

La solution recommandée consiste à définir le bundle sur le même chemin que les fichiers CSS sources du bundle. Cela garantit que les chemins relatifs des images dans les fichiers CSS restent valides. Par exemple, la définition de bundle suivante résout le problème du chemin de l'image :

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

Alternativement, les versions plus récentes d'ASP.NET peuvent prendre en charge l'application d'une CssRewriteUrlTransformation pour modifier les chemins d'image relatifs dans les fichiers CSS groupés en chemins absolus dans le répertoire virtuel. Ceci peut être réalisé en utilisant le code suivant :

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

Cette approche réécrit les chemins relatifs des images en chemins absolus, garantissant que les images sont résolues correctement. Notez que des problèmes peuvent survenir si la réécriture transforme les chemins absolus en chemins dans un répertoire virtuel, il est donc recommandé de tester cette approche avec soin.

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!