Heroku已上传资源，但图片的URL没有更新

Question

我最近将我的应用程序部署到Heroku，除了在jquery-raty中定义的图像之外，一切都运行正常。基本上，这个gem允许您轻松地实现一个评分系统（可视化）。

当我推送到Heroku时，资源被预编译，我可以看到我指定为jquery-raty工作的图像已成功编译，并且它们的名称已更改（即image.png变为image-f96e0d1182b422c912116f08ac8f7d78.png）。一切都很好 - 但我发现在部署到Heroku时，这个新名称没有反映出来。也就是说，该图像正在尝试从https://myapp.herokuapp.com/assets/image.png而不是https://myapp.herokuapp.com/assets/image-f96e0d1182b422c912116f08ac8f7d78.png中获取。

这是我的问题 - 我现在完全不知道如何使URL正确指向。

有其他人找到解决办法吗？

谢谢。

- DrBankHead1

---

你能发布一下你的项目目录结构吗？ - iJade

我知道文件存在于：https://myapp.herokuapp.com/assets/image-f96e0d1182b422c912116f08ac8f7d78.png。我可以访问该URL并查看图像。问题在于由jquery-raty生成的HTML不会更新URL。 - DrBankHead1

我可以通过在jquery-raty文件名参数中添加奇怪的哈希“db77788e1a12d88ca2dcbc0117cc44cf”来使它正常工作。但是那似乎是不安全的，因为这些哈希值在资产流水线编译每次更改 - 我不应该这样做。 - DrBankHead1

Answer 1

你遇到的问题基本上是使用Rails资源管道预编译功能的缺陷之一，其中你的图片和其他媒体将被赋予一个哈希值；并且这些资产的任何引用都必须是动态的以适应。

你的问题在于当你预编译你的资产时，.css文件中的静态链接只指向 url(/assets/image.png)。然而，你真正需要的是使用asset_path或asset_url助手动态呈现该链接。

解决方案是SCSS

我们也遇到了这个问题（我们使用 asset sync gem），并发现解决它的最佳方法是使用SCSS动态渲染你的资源路径。以下是我们的一些代码：

#app/assets/stylesheets/application.css.scss (yes, you should change it)
@import 'layout/fonts';

#app/assets/stylesheets/layout/fonnts.css.scss
@font-face {
    font-family: 'akagi';
    src: asset_url('fonts/akagi-th-webfont.eot');
    src: asset_url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'),
         asset_url('fonts/akagi-th-webfont.woff') format('woff'),
         asset_url('fonts/akagi-th-webfont.ttf') format('truetype'),
         asset_url('fonts/akagi-th-webfont.svg#akagithin') format('svg');
    font-weight: 300;
    font-style: normal;
}

你看到我们如何使用asset_url了吗？

这使得rake能够定义编译时的新资源路径，而不是旧的资源路径。这意味着当你运行rake assets:precompile时，你将获得所有正确的引用。

每当我们编译我们的资产时，我建议使用这个预编译过程：

rake assets:precompile RAILS_ENV=production

...当你上传到Heroku后：

heroku run rake assets:precompile --app [your app]

- Richard Peck

Answer 2

如果您使用的是Rails 4

静态资产将不带指纹引用。因此，资产最终会出现404错误。 自Rails 4以来，默认情况下将摘要选项设置为false。

https://github.com/rails/rails/issues/11482

虽然不是首选解决方案，但您可以尝试在public文件夹中同时拥有摘要和非摘要资产。

这可能适合您的任务 - https://github.com/alexspeller/non-stupid-digest-assets

您也可能希望查看此内容 https://github.com/rails/sprockets-rails/issues/49

- swapab

---

这个答案对于jquery.raty.js或任何类似的情况非常有用，其中图像在js文件中被引用。 - Ducle

Answer 3

感谢@Rich Peck、@swap.nil和其他人回答我的问题。昨天我花了几个小时搞这个，最终决定做我一开始就应该做的事情——阅读这个页面资产管道。

......基本上就是@Rich Peck提到的动态渲染URL的关键。为了实现这一点，我只需要将我的.js.coffee文件更改为.js.coffee.erb文件，并使用"<%= asset_path('my-image.png') %>"来呈现文件的适当URL。一旦我这样做了，一切都正常工作了。我不需要手动预编译资产——我仍然让heroku自动为我完成这项工作。

再次感谢大家在解决这个问题时的支持 :)

- DrBankHead1