导轨4 - >回形针添加"%3F1417409694"映像文件名 - 导致无法加载资源

时间:2014-12-01 06:04:46

标签: ruby-on-rails image paperclip

我已将paperclip安装到我的Rails 4应用程序中。我大多遵循下面列出的教程来做到这一点。

这个问题的要点(以及我认为是问题的主要来源)在本文的最后部分总结最终想法

但是,如果你倾向于看到我所包含的一切。这就是我使用Paperclip附加图像所做的工作

的Gemfile

gem 'paperclip', github: 'thoughtbot/paperclip'

Product.rb (型号)

class Product < ActiveRecord::Base

has_attached_file :image, :styles => { :small => "150x150>" },  
  :url => "/assets/products/:id/:style/:basename.:extension",  
  :path => ":rails_root/public/assets/products/:id/:style/:basename.:extension"  


do_not_validate_attachment_file_type :image

end

移植

class AddAttachmentImageToProducts < ActiveRecord::Migration
  def self.up
    change_table :products do |t|
      t.attachment :image
    end
  end

  def self.down
    remove_attachment :products, :image
  end
end

products / index.html.erb (产品表)

<%- model_class = Product -%>
<div class="page-header">
  <h1><%=t '.title', :default => model_class.model_name.human.pluralize.titleize %></h1>
</div>
<table class="table table-striped">
  <thead>
    <tr>
      <th><%= model_class.human_attribute_name(:image) %></th>
      <th><%= model_class.human_attribute_name(:id) %></th>
      <th><%= model_class.human_attribute_name(:name) %></th>
      <th><%= model_class.human_attribute_name(:price) %></th>
      <th><%= model_class.human_attribute_name(:category) %></th>
      <th><%= model_class.human_attribute_name(:created_at) %></th>
      <th><%=t '.actions', :default => t("helpers.actions") %></th>
    </tr>
  </thead>
  <tbody>
    <% @products.each do |product| %>
      <tr>
        <td> <%= image_tag product.image.url(:small) %></td>
        <td><%= link_to product.id, product_path(product) %></td>
        <td><%= product.name %></td>
        <td><%= product.price %></td>
...
.....

_form.html.erb (用于创建新产品的表单)

<%= form_for @product, :html => { :multipart => true } do |f| %>
    <% if @product.errors.any? %>
    <div id="error_expl" class="panel panel-danger">
      <div class="panel-heading">
        <h3 class="panel-title"><%= pluralize(@product.errors.count, "error") %> prohibited this product from being saved:</h3>
      </div>
      <div class="panel-body">
        <ul>
        <% @product.errors.full_messages.each do |msg| %>
          <li><%= msg %></li>
        <% end %>
        </ul>
      </div>
    </div>
  <% end %>

  <div class="control-group">
    <%= f.label :name, :class => 'control-label' %>
    <div class="controls">
      <%= f.text_field :name, :class => 'form-control' %>
    </div>
    <%= error_span(@product[:name]) %>
  </div>
  <div class="field">
    <%= f.label :image %><br>
    <%= f.file_field :image %>
</div>
...
.....

观察

以下是我在终端收到的错误摘录..

ActionController::RoutingError (No route matches [GET] "/products/4/small/pflogo.png%3F1417408937"):
  actionpack (4.1.6) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
  actionpack (4.1.6) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
  railties (4.1.6) lib/rails/rack/logger.rb:38:in `call_app'
  railties (4.1.6) lib/rails/rack/logger.rb:20:in `block in call'
  activesupport (4.1.6) lib/active_support/tagged_logging.rb:68:in `block in tagged'
  activesupport (4.1.6) lib/active_support/tagged_logging.rb:26:in `tagged'
  activesupport (4.1.6) lib/active_support/tagg

我不确定为什么将%3F1417408937添加到我的图像文件名末尾?

图片文件位于public/assets/products/pflogo.png

所以,我的猜测是我在模型中设置的:url和:path在某种程度上是不正确的。

  • 在我的产品页面(localhst:3000/products)上,图片有一个空白占位符。常见的“破碎图像”缩略图。当我通过chrome开发人员工具检查元素时,我看到以下

    Uncaught TypeError:undefined不是functionbootstrap.js?body = 1:3(匿名函数)jquery.js?body = 1:3120 firejquery.js?body = 1:3232 self.fireWithjquery.js?body = 1 :3444 jQuery.extend.readyjquery.js?body = 1:3475已完成

    产品:115 GET ....:// localhost:3000 / assets / products / 4 / small / pflogo.png%3F1417409694 404(未找到) 产品:127 GET ....:// localhost:3000 / images / small / missing.png 404(未找到) 产品:223 GET ....:// localhost:3000 / assets / products / 17 / small / pflogo.png%3F1417340013 404(未找到)

最后的想法

因此,我们再次看到Paperclip正在向我的图像文件名添加%3F1417409694。当我使用Inspect Element编辑它时,会产生正确的结果,并且我能够在Products页面上看到图像。

1 个答案:

答案 0 :(得分:2)

只需将宝石'paperclip',github:'thinkbot / paperclip'更改为你的宝石文件

gem“paperclip”

再次捆绑添加它将起作用的图像