Rails 3.1 e ativos de imagem

156

Coloquei todas as minhas imagens para o meu tema de administrador na pasta de ativos em uma pasta chamada admin. Então eu vinculo a ele como isto é normal.

# Ruby    
image_tag "admin/file.jpg" .....
#CSS
.logo{ background:url('/assets/images/admin/logo.png');

PARA SUA INFORMAÇÃO. Apenas para teste, ainda não estou usando a tag asset_path, pois ainda não compilei meus ativos.

Ok, tudo bem até agora, até que eu decidi atualizar uma imagem. Troquei algumas cores, mas ao recarregar a nova imagem estilizada não está aparecendo. Se eu visualizar a imagem diretamente no navegador, ainda está mostrando a imagem antiga. Indo um passo adiante, destruí a pasta de imagens de administrador. Mas não quebrou nada, todas as imagens ainda estão sendo exibidas. E sim, limpei meu cache e tentei em vários navegadores.

Existe algum tipo de cache de imagem em andamento? Este é apenas o desenvolvimento local usando o pow para servir as páginas.

Mesmo destruindo toda a pasta de imagens, as imagens ainda estão sendo exibidas.

Estou esquecendo de algo?

ruby-on-rails ruby-on-rails-3 Lee
fonte
2
esse não é o caso do 3.1 usando o pipeline de ativos. Você usaria os ativos comando rake: pré-compilação que irá comprimir os arquivos e movê-los para o arquivo público
Lee
2
Bem, movê-los para a pasta pública funcionou, todos um pouco estranhos, pois funcionavam bem sendo servidos na pasta de ativos. Talvez tenha que esperar por mais documentos sobre o 3.1.
Lee
3
Eu entendo sua frustração. Aparentemente, os candidatos a liberação não são muito bem documentados.
tybro0103
1
Deixe-os em ativos, apenas não inclua um caminho de pasta. Veja minha resposta abaixo.
Andrew

Respostas:

226

Na versão 3.1, você apenas se livra da parte 'images' do caminho. Portanto, uma imagem que /assets/images/example.pngfica na verdade estará acessível em uma solicitação de obtenção neste URL -/assets/example.png

Como a assets/imagespasta é gerada junto com um novo aplicativo 3.1, esta é a convenção que eles provavelmente desejam que você siga. Eu acho que é onde image_tagprocuraremos, mas ainda não testei.

Além disso, durante a palestra do RailsConf, lembro-me do D2h dizendo que o public foldernão deveria ter muito mais, principalmente apenas páginas de erro e um favicon.

Lee McAlilly
fonte
Sim, eu brinquei com esse lote e eles têm algum caminho a percorrer para facilitar as coisas. Sim, colocá-los na minha pasta de ativos funciona, mas você pode usar a etiqueta de ativos. Então, eu estou esperando para ver o que mais informações sai.
Lee
1
Obrigado, me ajudou muito também. Esse é o tipo de coisa que está me deixando louco como um cara tentando aprender Rails vindo de outras estruturas de desenvolvimento web.
Jn29098
6
e o que aconteceria se duas pastas diferentes contivessem o mesmo nome de arquivo?
Hady Elsahar
6
Não deveria ser DH2?
Tiago Franco
1
Não sei por que eles tiveram que mudar algo que já funcionava.
Tastybrownies
98

Você deseja alterar a extensão do seu arquivo css de .css.scsspara .css.scss.erbe do:

background-image:url(<%=asset_path "admin/logo.png"%>);

Pode ser necessário fazer uma "atualização definitiva" para ver as alterações. CMD + SHIFT + R nos navegadores OSX.

Na produção, verifique se

rm -rf public/assets    
bundle exec rake assets:precompile RAILS_ENV=production

acontece na implantação.

tybro0103
fonte
44
Há novos ajudantes de imagem em sass: image_url, image_path, ... Mais pode ser encontrado aqui: edgeguides.rubyonrails.org/asset_pipeline.html Não há necessidade de uso erb como um pré-processador mais
Martin Wawrusch
1
Tentei os ajudantes do sass-rails (image_url e image-url) em um arquivo css.scss, mas ele não parece ser interpretado. Qualquer pista ?
Invaino
2
Os arquivos scss gerados são nomeados .css.scss por padrão, nenhum cagado na cama ainda aconteceu
Adrian Macneil
2
Por alguma razão, image-url não funcionou para mim, mas asset-url ('myimage.png', imagem) funcionou perfeitamente. (Rails 3.1)
Elad
1
No caso de alguém a atualização do 3.0 está se perguntando, você pode simplesmente mudar o nome de suas folhas de estilo a partir .cssde .css.erb(depois que você moveu-los para app/assetsobter o processamento erb sem sass.
William Denniss
22

Pelo que vale a pena, quando fiz isso, descobri que nenhuma pasta deveria ser incluída no caminho no arquivo css. Por exemplo, se eu tiver app/assets/images/example.png, e coloquei isso no meu arquivo css ...

div.example { background: url('example.png'); }

... então, de alguma forma, funciona magicamente. Eu descobri isso executando a rake assets:precompiletarefa, que apenas suga tudo para fora de todos os seus caminhos de carga e despeja-lo em uma pasta lixo gaveta: public/assets. Isso é irônico, IMO ...

De qualquer forma, isso significa que você não precisa colocar nenhum caminho de pasta; tudo nas pastas de ativos acabará vivendo em um diretório enorme. Como este sistema resolve conflitos de nome de arquivo não é claro, talvez seja necessário ter cuidado com isso.

Tipo de frustrante, não há documentos melhores por aí para essa grande mudança.

Andrew
fonte
3
Quando há conflitos de nomenclatura, o primeiro caminho que aparece na matriz config.assets.paths é o arquivo escolhido. Isso pode ser evitado usando o asset_path()auxiliar e especificando o diretório
Joseph Ravenwolfe
6
Isso "funciona magicamente" porque o arquivo css e as imagens estão no mesmo local. As referências de arquivo CSS são relativas ao local do arquivo css.
Bill Leeper
O pipeline de ativos pode ser um pouco de caixa preta, especialmente para desenvolvedores de front-end, mas oferece muitos recursos excelentes, como não ter que se preocupar com caminhos de arquivo e bloqueio automático de cache.
Miles
16

No Rails 4, agora você pode usar um urss de imagem css e sass helper: 

div.logo {background-image: image-url("logo.png");}

Se suas imagens de plano de fundo não estiverem aparecendo, considere como você as está referenciando em suas folhas de estilo.

lflores
fonte
1
Isso está correto (para trilhos 4). Vote esta resposta!
ahnbizcad
O Rails 'ajuda', inserindo a palavra-chave url e a string. Isso significa que você pode fazer coisas como. div.logo {background: image-url("logo.png") no-repeat center;}
precisa
10

ao referenciar imagens em CSS ou em uma tag IMG, use image-name.jpg

enquanto a imagem está realmente localizada em ./assets/images/image-name.jpg

Tilo
fonte
Eu acho que isso está errado quando se trata de CSS - usando o rails 3.1.0.rc4 quando eu o uso background: url('sort_asc_disabled.png')funciona para o arquivo app / assets / images / sort_asc_disabled.png.
wonderfulthunk
2

http://railscasts.com/episodes/279-understanding-the-asset-pipeline

Este railscast (vídeo do Tutorial do Rails sobre o pipeline de ativos) também ajuda muito a explicar os caminhos no pipeline de ativos. Achei bastante útil e assisti algumas vezes.

A solução que escolhi foi a de @Lee McAlilly acima, mas este railscast me ajudou a entender por que funciona. Espero que ajude!

botbot
fonte
0

O pipeline de ativos em trilhos oferece um método para exatamente isso.

Você simplesmente adiciona image_path ('nome do arquivo da imagem') ao seu arquivo css ou scss e o rails cuida de tudo. Por exemplo:

.logo{ background:url(image_path('admin/logo.png'));

(observe que ele funciona exatamente como em uma exibição .erb e você não usa "/ assets" ou "/ assets / images" no caminho)

O Rails também oferece outros métodos auxiliares, e há outra resposta aqui: Como uso imagens de referência no Sass ao usar o Rails 3.1?

benrugg
fonte
Eu sei que essa pergunta tem alguns anos, mas essa foi a primeira página que eu encontrei no google ao pesquisar isso, por isso seria incrível selecionar uma resposta para que outras pessoas pudessem referenciar isso com facilidade!
benrugg