Rails 4 image-path, image-url e asset-url não funcionam mais em arquivos SCSS

99

Devemos usar algo além de image-urle outros no Rails 4? Eles retornam valores diferentes que não parecem fazer sentido. Se eu tiver logo.pngem /app/assets/images/logo.pnge eu faço o seguinte, isso é o que eu recebo:

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")

Claro que nenhum desses funcionam porque eles precisam pelo menos /assetsna frente.

ATUALIZAÇÃO : Na verdade, acabei de notar, como faço para acessar as imagens no Rails 4? Eu tenho uma imagem em/app/assets/images/logo.png. Mas se eu for para qualquer um dos seguintes URLs, ainda não vejo minha imagem:

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

ATUALIZAÇÃO 2 : A única maneira de abrir o meulogo.pngé movendo-o para o/app/assets/stylesheetsdiretório e puxando para cima:

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

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

— em.
fonte

Experimente:asset_path("logo.png", image)

— Marcelo De Polli

@depa - que simplesmente foi convertido para "/logo.png", o que não mostra minha imagem.

— em.

3

Você está usando esse auxiliar dentro de um .cssarquivo ou em um .css.scssarquivo?

— Marcelo De Polli

@depa - não usando nenhum ajudante. Acho que este é um problema maior de ativos simplesmente não funcionarem para minha pasta de imagens

— em.

1

@depa - oh, entendo o que você está perguntando. Está dentro de um .css.scssarquivo

— em.

113

Eu só tive esse problema. 3 pontos que espero ajudar:

Se você colocar imagens em seu app/assets/imagesdiretório, poderá chamar a imagem diretamente, sem prefixo no caminho. ie.image_url('logo.png')
Dependendo de onde você usa o ativo dependerá do método. Se você o está usando como uma background-image:propriedade, sua linha de código deve ser background-image: image-url('logo.png'). Isso funciona para as folhas de estilo menos e sass. Se você estiver usando inline na visualização, precisará usar o image_taghelper embutido no rails para gerar sua imagem. Mais uma vez, sem prefixo<%= image_tag 'logo.png' %>
Por último, se você estiver pré-compilando seus ativos, execute rake assets:precompilepara gerar seus ativos ou rake assets:precompile RAILS_ENV=productionpara produção, caso contrário, seu ambiente de produção não terá os ativos de impressão digital ao carregar a página.

Também para os comandos do ponto 3, você precisará prefixá-los com bundle execse estiver executando o bundler.

— cdaloisio
fonte

1

Outro ponto é ler a documentação guias.rubyonrails.org/asset_pipeline.html . Você também pode ver no Web Developer Debug do seu navegador se as imagens estão sendo carregadas?

— H.Rabiee

3

Agora é assim que você escreve uma resposta. Cada cenário. Prever o "e se", sem pontas soltas. Uma marca de alguém que "viu o combate" (realmente resolveu o problema).

— ahnbizcad

Eu fui mordido por perder a produção de RAILS_ENV = em várias ocasiões.

— Sixty4Bit

62

Sua primeira formulação,, image_url('logo.png')está correta. Se a imagem for encontrada, ela gerará o caminho /assets/logo.png(mais um hash na produção). Porém, se o Rails não conseguir encontrar a imagem que você nomeou, ela retornará /images/logo.png.

A próxima questão é: por que Rails não está encontrando sua imagem? Se você colocá-lo em app / assets / images / logo.png, poderá acessá-lo indo para http://localhost:3000/assets/logo.png.

Se funcionar, mas seu CSS não estiver sendo atualizado, pode ser necessário limpar o cache. Exclua tmp/cache/assetsdo diretório do projeto e reinicie o servidor (webrick, etc.).

Se isso falhar, você também pode tentar usar apenas background-image: url(logo.png);Isso fará com que seu CSS procure por arquivos com o mesmo caminho relativo (que neste caso é / assets).

— Nick Urban
fonte

2

Só para começar, fui mordido por usar aspas duplas no caminho da imagem em vez de aspas simples. Você deve usar aspas simples com os auxiliares de ativos nos arquivos css / scss.

— d_ethier

estou recebendo "variável local indefinida ou método` imagem '"

— Muhammad Umer

É possível que você acidentalmente coloque um espaço antes da palavra imagem?

— Nick Urban

10

Acabei de descobrir que usando o asset_urlhelper você resolve esse problema.

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

— Leftis
fonte

Eu tenho um undefined local variable or method 'image'erro.

— Penguin de

Talvez algo tenha mudado nos trilhos, essa resposta é velha! Você pode tentarasset_path("<your_path>", type: :image)

— Leftis de

8

Tive um problema semelhante ao tentar adicionar uma imagem de fundo com css embutido. Não há necessidade de especificar a pasta de imagens devido à forma como a sincronização de ativos funciona.

Isso funcionou para mim:

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

— ykwx
fonte

Obrigado, eu estava fazendo assets/img.jpgou ../assets/img.jpgque obviamente não funciona em nenhum diretório. /assets/img.jpgfaz. TY

— ElliotM

5

O Rails 4.0.0 terá a aparência definida image-urlna mesma estrutura de diretório do seu arquivo css.

Por exemplo, se o seu css em assets/stylesheets/main.css.scss, image-url('logo.png')se torna url(/assets/logo.png).

Se você mover o arquivo css para assets/stylesheets/cpanel/main.css.scss, image-url('logo.png')torna-se /assets/cpanel/logo.png.

Se você quiser usar a imagem diretamente no diretório de ativos / imagens, você pode usar asset-url('logo.png')

— Kuntoaji
fonte

5

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

— user2586863
fonte

3

Qual é a principal diferença entre url(asset_path('image.jpg'), url('image.jpg')e image-url('image.jpg')? Estou trabalhando com Rails 5.0.0.1 e url()funciona bem em arquivos SCSS e em arquivos html.erb que uso, asset_path()então gostaria de saber o caminho correto a seguir. Desde já, obrigado.

— alexventuraio

asset_pathadicione ao arquivo de imagem um apêndice de resumo. Na verdade, é para produção; após cada implantação, o apêndice de um resumo será alterado e o navegador do usuário fará o download da nova versão das imagens.

— Alex Kojin