由于带有设计和回形针的 Rails 中的 Angular 路由，找不到图像路径

Question

我使用 Angular 和 Rails 作为 API，身份验证是通过设计构建的，并添加了回形针的头像。

每条路由都通过 routes.rb 中的 catch all 路径路由到带有 $routeProvider 的 Angular app.js。

所有模板都位于 Angular 中，除了 Rails 中的导航栏。我可以在导航栏中成功查看用户的图片：

<%= image_tag current_user.avatar.url(:thumb), class: 'img-circle' %>

:avatar 在 user.rb 模型中是这样提到的：

has_attached_file :avatar,
    :styles => { :medium => "300x300>", :thumb => "100x100#" },
    :default_url => "/images/default_user_avatar.jpg"
  validates_attachment_content_type :avatar, :content_type => /\Aimage\/.*\Z/

问题在于，尽管默认图像位于 /images/ 目录中，但无法检索以显示。浏览器中的链接如果我查看页面源是 website.com:3000/images/default_user_avatar.jpg 并且它不存在。

我知道我在这里遗漏了严重的代码，但这个问题很复杂，所以请告诉我我还可以添加什么以获得帮助。

Answer 1

您应该知道，Rails 资产管道预编译所有资产并为其生成新文件名
（即assets/my-image-7e48a0e29e11ccae7aa9a0008b056933af9cb3ad347006f4bae0c5c7dab40277.png）

您可以通过三种不同的方式让 Angular 正确加载图像。

1. 将您的图像添加到公共文件夹。这会将您的资产从 资产管道 中取出，您将能够通过它们的路径和名称来引用它们。

   虽然这是迄今为止最简单的解决方案，但您应该清楚资产管道将不再为您解决的问题。

2. 对于小尺寸图片，您可以在 CSS 中使用它们的编码值；

3. 在你的 Angular 文件中使用 Rails asset helpers。

   • 为您的 Angular 文件添加 .erb 扩展名。最好使用一个集中所有资产 URL 的文件；

   • 使用 Rails 资源助手（asset_path、image_path、image_url 等）获取正确的资源路径。

     对于在app/assets/images 内部找到的图像，您只需指定文件名，而无需指定images/ 部分。

     $scope.imageUrl = '<%= image_path("my-image.png") %>';