Rails 4 image-path, image-url y asset-url ya no funcionan en archivos SCSS

99

¿Se supone que debemos usar algo más aparte de image-urly otros en Rails 4? Devuelven valores diferentes que no parecen tener sentido. Si tengo logo.pngen /app/assets/images/logo.pngy hago lo siguiente, esto es lo que me sale:

image-url("logo.png") -> url("/images/logo.png") #obviously doesn't work
image-path("logo.png") -> "/images/logo.png"
asset-url("logo.png") -> url("/logo.png")

Por supuesto que ninguno de estos funciona porque necesitan al menos /assetsde frente.

ACTUALIZACIÓN : En realidad, acabo de notar, ¿cómo accedo a las imágenes en Rails 4? Tengo una imagen en/app/assets/images/logo.png. Pero si voy a cualquiera de las siguientes URL, sigo sin ver mi imagen:

http://localhost:3000/assets/logo.png
http://localhost:3000/assets/images/logo.png
http://localhost:3000/logo.png
http://localhost:3000/images/logo.png

ACTUALIZACIÓN 2 : La única forma en que puedo abrir milogo.pnges moviéndolo al/app/assets/stylesheetsdirectorio y luego tirando hacia arriba:

http://localhost:3000/assets/logo.png

ruby-on-rails asset-pipeline ruby-on-rails-4

— a.
fuente

Prueba esto:asset_path("logo.png", image)

— Marcelo De Polli

@depa - que simplemente se convirtió a "/logo.png", que no muestra mi imagen.

— en.

3

¿Está utilizando ese ayudante dentro de un .cssarchivo o en un .css.scssarchivo?

— Marcelo De Polli

@depa - sin usar ningún ayudante. Creo que este es un problema mayor de activos que simplemente no funcionan para mi carpeta de imágenes

— en.

1

@depa - oh, veo lo que estás preguntando. Está dentro de un .css.scssarchivo

— en.

113

Yo solo tuve este problema. 3 puntos que con suerte ayudarán:

Si coloca imágenes en su app/assets/imagesdirectorio, entonces debería poder llamar a la imagen directamente sin prefijo en la ruta. es decir.image_url('logo.png')
Dependiendo de dónde use el activo, dependerá del método. Si lo está utilizando como una background-image:propiedad, entonces su línea de código debería ser background-image: image-url('logo.png'). Esto funciona tanto para hojas de estilo menos como para sass. Si lo está usando en línea en la vista, entonces necesitará usar el image_tagasistente integrado en rieles para generar su imagen. Una vez más, sin prefijos<%= image_tag 'logo.png' %>
Por último, si está compilando previamente sus activos, ejecute rake assets:precompilepara generar sus activos o rake assets:precompile RAILS_ENV=productionpara producción; de lo contrario, su entorno de producción no tendrá los activos con huellas digitales cuando cargue la página.

También para esos comandos en el punto 3, necesitará prefijarlos bundle execsi está ejecutando bundler.

— cdaloisio
fuente

1

Otro punto es leer la documentación guides.rubyonrails.org/asset_pipeline.html . ¿También puede ver en la depuración de desarrollador web de su navegador si las imágenes se están cargando?

— H.Rabiee

3

Ahora, así es como escribes una respuesta. Cada escenario. Predecir los "qué pasaría si", sin cabos sueltos. Una marca de alguien que ha "visto el combate" (realmente resolvió el problema).

— ahnbizcad

Me ha mordido la falta de producción de RAILS_ENV = en varias ocasiones.

— Sixty4Bit

62

Su primera formulación image_url('logo.png'), es correcta. Si se encuentra la imagen, generará la ruta /assets/logo.png(más un hash en producción). Sin embargo, si Rails no puede encontrar la imagen que nombró, recurrirá a ella /images/logo.png.

La siguiente pregunta es: ¿por qué Rails no encuentra tu imagen? Si lo pone en app / assets / images / logo.png, debería poder acceder a él yendo a http://localhost:3000/assets/logo.png.

Si eso funciona, pero su CSS no se actualiza, es posible que deba borrar el caché. Elimine tmp/cache/assetsdel directorio de su proyecto y reinicie el servidor (webrick, etc.).

Si eso falla, también puede intentar usar background-image: url(logo.png);Eso hará que su CSS busque archivos con la misma ruta relativa (que en este caso es / assets).

— Nick Urban
fuente

2

Solo para saltar sobre esto, me mordió usar comillas dobles en la ruta de la imagen en lugar de comillas simples. Usas comillas simples con los asistentes de activos en los archivos css / scss.

— d_ethier

obtengo "variable local indefinida o" imagen "del método"

— Muhammad Umer

¿Es posible que coloques accidentalmente un espacio antes de la palabra imagen?

— Nick Urban

10

Acabo de descubrir que al usar asset_urlhelper se resuelve ese problema.

asset_url("backgrounds/pattern.png", image)

— Leftis
fuente

Tengo un undefined local variable or method 'image'error.

— Pingüino

Tal vez algo cambió en los rieles, ¡esta respuesta es vieja! Puedes intentarloasset_path("<your_path>", type: :image)

— Leftis

8

Tuve un problema similar al intentar agregar una imagen de fondo con CSS en línea. No es necesario especificar la carpeta de imágenes debido a la forma en que funciona la sincronización de activos.

Esto funcionó para mí:

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

— ykwx
fuente

Gracias, lo estaba haciendo assets/img.jpgo ../assets/img.jpgque obviamente no funciona en ningún directorio. /assets/img.jpghace. TY

— ElliotM

5

Rails 4.0.0 verá la imagen definida con la image-urlmisma estructura de directorio con su archivo css.

Por ejemplo, si el CSS en assets/stylesheets/main.css.scss, image-url('logo.png')vuelve url(/assets/logo.png).

Si mueve su archivo css a assets/stylesheets/cpanel/main.css.scss, se image-url('logo.png')convierte en /assets/cpanel/logo.png.

Si desea usar la imagen directamente en el directorio assets / images, puede usar asset-url('logo.png')

— kuntoaji
fuente

5

para hojas de estilo: url (asset_path ('image.jpg'))

— usuario2586863
fuente

3

¿Cuál es la principal diferencia entre url(asset_path('image.jpg'), url('image.jpg')y image-url('image.jpg')? Estoy trabajando con Rails 5.0.0.1 y url()funciona bien en archivos SCSS y en archivos html.erb que uso, asset_path()así que me gustaría saber cuál es el camino correcto a seguir. Gracias por adelantado.

— alexventuraio

asset_pathagregue al archivo de imagen un apéndice de resumen. En realidad, es para producción, después de cada implementación, se cambiará el apéndice de un resumen y el navegador del usuario descargará una nueva versión de las imágenes.

— Alex Kojin