Question

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

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

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

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

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

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正确加载图像。

将图片添加到公用文件夹。这会将您的资产从资产管道中取出，您可以通过其路径和名称来引用它们。

虽然这是迄今为止最简单的解决方案，但您应该清楚资产管道不再为您解决的问题。
对于小尺寸图片，您可以在CSS中使用编码值;
在Angular文件中使用Rails 资产助手。
- 为Angular文件添加.erb扩展名。最好是使用集中所有资产URL的单个文件;
- 使用Rails资产助手（asset_path，image_path，image_url等）获取正确的资产路径。
  
  对于在app/assets/images内找到的图片，您只需要指定文件名，而不需要images/部分。
  
  $scope.imageUrl = '<%= image_path("my-image.png") %>';

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

1 个答案: