由于 Angular 在 Rails 中使用 devise 和回形针进行路由，因此找不到图像路径

Question

我正在使用 Angular 和 Rails 作为 API 并且身份验证是使用 devise 构建的，头像是用回形针添加的。

每条路由都通过 routes.rb 中的捕获所有路径路由到 Angular app.js 和 $routeProvider。

所有模板都位于 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/ 目录中，但无法检索它以便显示。浏览器中的 link 如果我查看页面源是 website.com:3000/images/default_user_avatar.jpg 并且它不存在。

我知道我在这里遗漏了重要的代码，但这个问题很复杂，所以请让我知道我还可以包括什么以获得一些帮助。

Answer 1

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

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

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

虽然这是迄今为止最简单的解决方案，但您应该清楚 资产管道 无法再为您解决的问题。
对于小尺寸图像，您可以在CSS;

编码值
在您的 Angular 文件中使用 Rails 资产助手。

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

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

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

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

由于 Angular 在 Rails 中使用 devise 和回形针进行路由，因此找不到图像路径

Image path not found because of Angular routing in Rails with devise and paperclip

ruby-on-rails

paperclip

devise

angularjs