部署 production 环境找不到 Extjs4 样式中的图片路径

yutian · 2013年08月07日 · 最后由 hexawing 回复于 2013年09月11日 · 3842 次阅读

项目背景描述: raisl4 中使用了 Extjs4,把 Extjs4 的库和 css 放在 vendor 目录下, vendor 目录结构如下 javascripts

│   └── extjs4
│       └── ext-all-dev.js
└── stylesheets
    └── extjs4
        └── resources
            ├── css
            │   └── ext-all.css
            ├── ext-theme-access
            │   └── images
            ├── ext-theme-classic
            │   └── images
            ├── ext-theme-neptune
            │   └── images
            │       ├── btn
            │       │   ├── btn-default-large-bg.gif

修改 production.rb 中的配置

config.serve_static_assets = false
config.assets.compile = false
config.assets.digest = true

修改为:

config.serve_static_assets = true  不设置为true找不到 extjs相关文件
config.assets.compile = true 
config.assets.digest = false  这个大概是改变assets文件的url的

现在加载 ext-all-dev.js 没有问题,但是加载图片的时候就不正常了, application.css 中内容 require extjs4/resources/ext-theme-classic/ext-theme-classic-all ext-theme-classic-all 这个文件中有类似 url(images/slider/slider-v-thumb.gif) 和 corners:url(images/btn/btn-default-small-pressed-corners.gif) 。项目去寻找 slider-v-thumb.gif 的时候提示找不到图片路径,发出的请求类似是: http://localhost:5000/assets/images/sizer/ne-handle.gif 图片路径出现错误,不知道各路神仙有何高见,还请不吝赐教,提前谢谢诸位!

执行这个命令了没?

rake assets:precompile

http://guides.rubyonrails.org/asset_pipeline.html

#1 楼 @huacnlee 执行过了 还是获取不到图片路径 刚才把项目放到 github 上了 [email protected]:rubylab/dep1.git

我建议把 css 改成 scss,然后用 image-url 包裹图片地址。 http://guides.rubyonrails.org/asset_pipeline.html#css-and-sass

我开始也和 LZ 一样,不过现在貌似搞定了。 思路是这样的:我自己写的 my_project.css.erb 里的路径它是可以找到的,但 extjs 的它没找到,于是我先把 extjs-all.css 改名成 extjs-all.css.erb,很不幸,还是不行。 然后我发现我自己的 css 里用到了这样的方法: background-image: url('<%= asset_path("silk_icon/add.png") %>') !important; 于是我把那个长长的 css 格式化了,然后把图片路径也换成这样的格式,但还是没找到。

再然后,我在http://ihower.tw/rails3/assets-and-ajax.html这里看到了这句话: 你可以在 terminal 中輸入 Rails.application.config.assets.paths 來查看所有的 assets 路徑 于是试了一下,Rails 果然只识别到了这一层: "my_project/vendor/assets/javascripts", "my_project/vendor/assets/stylesheets" 于是就很简单了,查找替换嘛。所有的图片链接全部改成这样:

.x-box-tl {
  background-image: url('<%= asset_path("extjs4/resources/themes/images/default/box/corners.gif") %>')
}

测试,OK……

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