MVC4 스타일 번들에 CSS 파일을 묶을 때 이미지 경로 문제를 어떻게 해결할 수 있습니까?

MVC4 StyleBundle 이미지 해상도 복잡성

MVC4의 번들링 기능은 웹 애플리케이션 최적화를 위한 편리한 솔루션을 제공합니다. 그러나 CSS 번들에서 이미지를 처리하는 것은 번들링 시 CSS 파일 내의 상대 이미지 경로가 손상될 수 있기 때문에 독특한 문제를 야기합니다.

비슷한 질문에서 언급했듯이 번들링하는 동안 원래 상대 이미지 경로를 유지하려면 다음을 지정하면 됩니다. 기존의 물리적 콘텐츠 경로와 충돌하지 않는 StyleBundle의 가상 경로입니다. 이 경우 번들 경로는 "/Content/styles/jquery-ui"로 지정되며, 이는 CSS 파일 및 이미지가 포함된 실제 경로 "/Content/css/jquery-ui"와 다릅니다.

그러나 이 접근 방식은 브라우저에서 이미지 경로가 깨질 수 있습니다. 브라우저가 번들로 제공되는 CSS 파일을 기준으로 이미지를 요청하므로 404 오류가 발생합니다.

권장되는 해결 방법은 번들의 소스 CSS 파일과 동일한 경로에 번들을 정의하는 것입니다. 이렇게 하면 CSS 파일 내의 상대 이미지 경로가 유효한 상태로 유지됩니다. 예를 들어 다음 번들 정의는 이미지 경로 문제를 해결합니다.

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

또는 최신 버전의 ASP.NET에서는 CssRewriteUrlTransformation을 적용하여 번들 CSS 파일의 상대 이미지 경로를 절대 경로로 수정하도록 지원할 수 있습니다. 가상 디렉터리. 이는 다음 코드를 사용하여 달성할 수 있습니다.

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

이 접근 방식은 상대 이미지 경로를 절대 경로로 다시 작성하여 이미지가 올바르게 확인되도록 합니다. 다시 쓰기가 절대 경로를 가상 디렉터리 내의 경로로 변환하는 경우 문제가 발생할 수 있으므로 이 접근 방식을 주의 깊게 테스트하는 것이 좋습니다.

위 내용은 MVC4 스타일 번들에 CSS 파일을 묶을 때 이미지 경로 문제를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!