部署 css 加载的背景图,正 production 环境解析不到图片,404

mahone3297 · 2014年01月07日 · 最后由 mahone3297 回复于 2014年01月09日 · 3880 次阅读

一直在 development 环境下开发,一直无问题。 切换到 production 环境,然后运行 rake assets:precompile 会将 assets 文件重命名

代码中如果是这样的话,没问题。 <%= image_tag 'slides/1.jpg' %> ruby 直接帮我把生成出来的 img 标签的图片地址也改成重命名后的了。

但是在 css 中的,不知道如何处理 .content{background: url(/assets/index_backgroud.png) no-repeat ; } /assets/index_backgroud.png 这个会导致加载不到图片(因为被重命名了) 求教,怎么破?

mv xxx.css xxx.css.erb

.content{background: url(<%= asset_path 'xxxx.png' %>) no-repeat ; }

#1 楼 @chaixl #2 楼 @lululau 多谢 2 位指点。 那如果是直接写在页面里的 css 呢(也就是没有独立出 css 文件)? 或者说 ror 不推荐这么写?

#3 楼 @mahone3297 最好是独立出来吧,html、css 以及 js 各司其职。还有上面说的问题,建议遵从 rails guides 的规范,使用 scss 文件即可:

2.3.2 CSS and Sass When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url > and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.

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

你只要将你的代码改为:

/* xxx.css.scss */
.content {
  background: image-url('index_backgroud.png') no-repeat ;
}

即可

#2 楼 @lululau 请教。。。百思不得其解。。。

mv xxx.css xxx.css.erb
.content{background: url(<%= asset_path 'xxxx.png' %>) no-repeat ; }

我已经做了这 2 步操作了,为什么这个 asset_path 好像没起作用,生成的 css 仍然是 .content{background: url(/assets/index_backgroud.png) no-repeat ;}

#4 楼 @Martin91

/* xxx.css.scss */
.content {
  background: image-url('index_backgroud.png') no-repeat ;
}

改成这样,生成的 css 应该是这样 url(index_backgroud.png),无法指向 compile 过的带 md5 的文件。。。

#5 楼 @mahone3297 precompile 时加上 RAILS_ENV=production 试试呢

#6 楼 @mahone3297 你是已经试过了还是只是你的猜测觉得不行?我的试验结果是可以的,scss 文件预编译的时候会自动替换 image-path 指定的文件所对应的预编译的版本。 我的试验代码是:

/* app/assets/stylesheets/home.css.scss */
.cartoon {
  width: 600px;
  height: 648px;
  background: image-url('cartoon.jpg') no-repeat;
}

执行预编译后,在 production 环境下启动 rails server,结果是正常显示背景图的,而且这段 scss 代码变为了:

.cartoon {
  width: 600px;
  height: 648px;
  background: url(/assets/cartoon-2d324851aeef0cc7d25d8615bef2cd88.jpg) no-repeat;
}

注意 文件名的改变image-url('cartoon.jpg')部分被换成了url(/assets/cartoon-2d324851aeef0cc7d25d8615bef2cd88.jpg)

#9 楼 @Martin91 我确实试过了,昨晚试了一晚上。。。见鬼了。。。 我今天再试试看。。。可能是 ls 说的,在 precompile 时加上 RAILS_ENV=production 试试。。。

#8 楼 @lululau mv xxx.css xxx.css.erb 看你一开始给我写的这步,我以为是一定要放进 css 文件里。这个 css 是直接在 html 里的。我后来直接用 asset_path 写在 html.erb 中就可以了。

#9 楼 @Martin91 刚才又试了,image-url 的方法还是不行。可能还有哪里没注意到。真是见鬼了。。。反正问题暂时算是解决了。。。采用了上面一种方法。。。

#9 楼 @Martin91 我 ruby 环境 ruby 2.0.0p353 (2013-11-22 revision 43784) [x86_64-linux] rails 环境 Rails 4.0.2 不知道有没有影响。。。不管怎样,谢谢大家!

需要 登录 后方可回复, 如果你还没有账号请 注册新账号