Configurar la ruta a las imágenes en CSS para entornos de desarrollo y producción

Question

Actualmente estoy desarrollando un sitio web y tengo mi entorno local alojado en un cuadro de XP con IIS 5.1. Estoy usando ASP MVC2 y .NET Framework 4.0.

Lo que quiero saber es si hay una forma de "configurar" en web.config (o de cualquier otro modo) una ruta para todas mis imágenes para que cuando mi CSS use url() sepa dónde buscar automáticamente para.

La razón principal detrás de esto es que tenemos muchas imágenes y documentos que no queremos almacenar en nuestro control de código fuente, ya que no es relevante tenerlos allí porque cambia mucho de nuestros escritores de contenido.

Proporcionar un espacio de desarrollo y producción para que editen, revisen y desplieguen sus propios documentos es también un gran beneficio para la productividad y quiero mantenerlo de esa manera si es posible ya que tenemos un mecanismo para validar que todos los archivos vinculados en nuestros sitios son validos

Así, por ejemplo, en mi caja dev, me gustaría utilizar "http://static.devserver/Images/ ...", pero cuando se despliega, me gustaría que utilicen "http://static.productionserver/Images/ ..."

Obviamente, teniendo en cuenta mis necesidades arriba, el alojamiento del CSS en el subdominio estático no funcionaría en este escenario o tal vez me he perdido algo?

Me han dicho que use mod_rewrite y/o htaccess pero no estoy muy bien documentado en esto y parece bastante complejo por el tiempo que tengo ahora para entregar este proyecto.

En general, me gustaría que ustedes compartan sus ideas y sugerencias sobre la forma en que podría hacer que funcione como lo describí anteriormente.

¡Muchas gracias por leer!

Answer 1

No existe una solución fácil para hacer exactamente lo que usted desea. Es posible que deba generar un archivo .css como una página dinámica, sustituyendo una cadena de configuración antes de cada URL (en CSS

¿Realmente necesita un subdominio? ¿Por qué no usar una subcarpeta? Url ('/ css/yourcss css) es universal tanto para dev y producción.

(Bueno, sé que hay problemas con el tráfico adicional de las cookies, pero aún así, esto es MUUCHO más fácil de hacer) ruta relativa

Answer 2

de BarMonster es el camino ir. La url ('/ subcarpeta/yourfile.ext'). Esa es la mejor manera de hacer imágenes, y la mayoría de los enlaces dentro del sitio para poder traducir entre entornos de prueba y en vivo.

Answer 3

Muchas gracias chicos por tratar de ayudarme! ¡Finalmente cavé de nuevo en la reescritura de URL para encontrar la solución a mi problema! ¡Necesitaba "redirigir" en lugar de "reescribir" la url!

¡Ahora funciona según lo previsto!

estoy usando Regrabadora URL de Intelligencia con esta simple regla:

<rewriter> 
     <redirect url="^.+\.(?:jpg|bmp|png|gif)$" to="http://myDEVserver$0" processing="stop" /> 
</rewriter> 

Answer 4

realizo esta pregunta se congeló hace largo tiempo, pero es el primer resultado de mi búsqueda en Google, por lo que pensé que había apuñalarlo en caso de que ayude a otros.

Mi solución a este problema es mover todas las reglas dentro de mis archivos CSS que contienen sentencias url() a mi Vista.

Estoy usando Razor en MVC 3, así que incluyo una sección de estilo en mi archivo de diseño base, y coloco todas las reglas problemáticas de url allí. Luego puedo usar el motor MVC para determinar la URL adecuada en tiempo de ejecución. Puede modificar esto para mirar dinámicamente un dominio diferente también.

<style type="text/css"> 
    .back 
    { 
     background: url(@Url.Content("~/Content/icons/gray/back.png")) no-repeat; 
    } 
    .link 
    { 
     background: url(@Url.Content("~/Content/icons/gray/link.png")) no-repeat; 
    } 
</style> 

La sintaxis es para el motor de la maquinilla de afeitar, pero para MVC 2 que podría hacer lo mismo dentro de su MasterPage.