run rails portable logs instal ruby-on-rails heroku ruby-on-rails-4

ruby on rails - portable - Cómo hacer referencia a imágenes en CSS dentro de Rails 4



heroku version (16)

Hay un problema extraño con Rails 4 en Heroku. Cuando se compilan las imágenes, se les agregan hashes, sin embargo, la referencia a esos archivos desde CSS no tiene el nombre adecuado ajustado. Esto es lo que quiero decir. Tengo un archivo llamado logo.png. Sin embargo, cuando aparece en heroku se ve como:

/assets/logo-200a00a193ed5e297bb09ddd96afb953.png

Sin embargo, el CSS aún dice:

background-image:url("./logo.png");

El resultado: la imagen no se muestra. ¿Alguien se encuentra con esto? ¿Como puede ésto ser resuelto?

Al hacer referencia a los http://guides.rubyonrails.org/asset_pipeline.html , vemos que hay algunas maneras de enlazar con imágenes de css. Solo ve a la sección 2.3.2.

Primero, asegúrese de que su archivo css tenga la extensión .scss si es un archivo sass.

Luego, puedes usar el método Ruby, que es realmente feo:

#logo { background: url(<%= asset_data_uri ''logo.png'' %>) }

O puede usar el formulario específico que es más agradable:

image-url("rails.png") returns url(/assets/rails.png) image-path("rails.png") returns "/assets/rails.png"

Por último, puede usar la forma general:

asset-url("rails.png") returns url(/assets/rails.png) asset-path("rails.png") returns "/assets/rails.png"

Curiosamente, si uso ''background-image'', no funciona:

background-image: url(''picture.png'');

Pero solo ''fondo'', lo hace:

background: url(''picture.png'');

En Rails 4, puede hacer referencia fácilmente a una imagen ubicada en assets/images/ en sus archivos .SCSS así:

.some-div { background-image: url(image-path(''pretty-background-image.jpg'')); }

Cuando inicie la aplicación en modo de desarrollo ( localhost:3000 ), debería ver algo como:

background-image: url("/assets/pretty-background-image.jpg");

En modo de producción, sus activos tendrán los números de ayuda de caché:

background-image: url("/assets/pretty-background-image-8b313354987c309e3cd76eabdb376c1e.jpg");

En Rails 4, simplemente use

.hero { background-image: url("picture.jpg"); }

en su archivo style.css, siempre que la imagen de fondo esté metida en la aplicación / assets / images.

En css

background: url("/assets/banner.jpg");

aunque la ruta original es /assets/images/banner.jpg, por convención tienes que agregar solo / assets / en el método url

Esto debería llevarte allí cada vez.

background-image: url(<%= asset_data_uri ''transparent_2x2.png''%>);

Esto funcionó para mí:

background: #4C2516 url(''imagename.png'') repeat-y 0 0;

LO QUE HE ENCONTRADO DESPUÉS DE HORAS DE MUDAR CON ESTO:

TRABAJOS :

background-image: url(image_path(''transparent_2x2.png'')); // how to add attributes like repeat, center, fixed?

Lo anterior muestra algo así como: "/assets/transparent_2x2-ec47061dbe4fb88d51ae1e7f41a146db.png"

Observe el "/" inicial , y está entre comillas . También tenga en cuenta la extensión scss y el asistente de image_path en yourstylesheet.css.scss. La imagen está en el directorio app / assets / images .

No funciona:

background: url(image_path(''transparent_2x2.png'') repeat center center fixed;

no funciona, propiedad no válida:

background:url(/assets/pretty_photo/default/sprite.png) 2px 1px repeat center fixed;

Mi último recurso iba a ser ponerlos en mi cubo público s3 y cargarlos desde allí, pero finalmente conseguí algo.

Ninguna de las respuestas dice sobre el camino, cuando tendré la extensión .css.erb , cómo hacer referencia a las imágenes . Para mí, trabajé tanto en producción como en desarrollo :

2.3.1 CSS y ERB

El inventario de activos evalúa automáticamente ERB . Esto significa que si agrega una extensión erb a un activo CSS (por ejemplo, application.css.erb ), entonces los helpers como asset_path están disponibles en sus reglas CSS:

.class { background-image: url(<%= asset_path ''image.png'' %>) }

Esto escribe la ruta al activo particular al que se hace referencia. En este ejemplo, tendría sentido tener una imagen en una de las rutas de carga de activos, como app/assets/images/image.png , a la que se hace referencia aquí. Si esta imagen ya está disponible en public/assets como un archivo de huellas dactilares, se hace referencia a esa ruta.

Si desea utilizar un URI de datos, un método para incrustar los datos de imagen directamente en el archivo CSS , puede usar el ayudante asset_data_uri .

.logo { background: url(<%= asset_data_uri ''logo.png'' %>) }

Esto inserta un URI de datos con formato correcto en la fuente de CSS.

Tenga en cuenta que la etiqueta de cierre no puede ser del estilo -%>.

No sé por qué, pero lo único que funcionó para mí fue el uso de asset_path en lugar de image_path , aunque mis imágenes se encuentran en el directorio assets / images / :

Ejemplo:

app/assets/images/mypic.png

En Ruby:

asset_path(''mypic.png'')

En .scss:

url(asset-path(''mypic.png''))

ACTUALIZAR:

Lo descubrí, resulta que estos ayudantes de activos provienen de la gema sass-rails (que había instalado en mi proyecto).

Piñones junto con Sass tiene algunos ayudantes ingeniosos que puedes usar para hacer el trabajo. Los piñones solo procesarán estos ayudantes si las extensiones de tus hojas de estilo son .css.scss o .css.sass .

Asistente específico de imagen:

background-image: image-url("logo.png")

Ayudante agnóstico:

background-image: asset-url("logo.png", image) background-image: asset-url($asset, $asset-type)

O si desea incrustar los datos de la imagen en el archivo css:

background-image: asset-data-url("logo.png")

Puede agregar a su extensión css .erb. Ej: style.css.erb

Entonces puedes poner:

background: url(<%= asset_path ''logo.png'' %>) no-repeat;

Solo este fragmento no funciona para mí:

background-image: url(image_path(''transparent_2x2.png''));

Pero renombrar stylename.scss a stylename.css.scss me ayuda.