Question

我知道这听起来像个愚蠢的问题，但我现在真的看不出根本原因......

我只是想在jQuery-File-Upload和Paperclip的帮助下使用ajax上传图像，一切都很好，文件上传，数据库条目成功保存。

唯一的问题是<%= image_tag @attached_image.image.url %>无法在我的create.js.erb中运行，我想用javascript在视图上创建一个条目。但是上传的文件实例的url是正确的。

如果我这样做正在工作：

$("#attached-images").append("<li><img src='http://localhost:3000<%= @attached_image.image.url %>'></img></li>")

但如果我这样做不能正常工作，那就是来自Paperclips Github自述文件：

$("#attached-images").append("<li><%= image_tag @attached_image.image.url %></li>")

并且在控制台中没有异常，没有任何异常。我真的很困惑..无论如何我可以在浏览器中调试js.erb处理吗？

我的观点：

<div id="upload-and-insert-image-dialog"> 
<%= form_for :attached_image, :remote => true, :url => attached_images_path(), :html => { :class => "upload", :multipart => true } do |f| %>
  <%= f.file_field :image %>
<% end %>
</div>
<ul id="attached-images">
</ul>

我的控制器：

class AttachedImagesController < ApplicationController
  def create
    @attached_image = AttachedImage.new(params[:attached_image])

    respond_to do |format|
      if @attached_image.save
        format.js
      else
        format.js { render 'attached_images/create_error' }
      end
    end
  end
end

我的attachment_images / create.js.erb：

$("#attached-images").append("<li><%= image_tag @attached_image.image.url %></li>")

我的模特：

class AttachedImage < ActiveRecord::Base
  belongs_to :attachable, :polymorphic => true

  has_attached_file :image
end

Answer 1

我发现了问题，因为我错过了escape_javascript函数，以下代码运行良好。

$("#attached-images").append("<li><%= escape_javascript(image_tag(@attached_image.image.url)) %></li>")

非常感谢@varatis，你提醒我了。

Answer 2

也许某些事情会起作用：

$('#attend-images').append('<%= escape_javascript(render partial: 'images') %>');

其中_images.html.erb部分位于相同的文件夹下：

<li><%= image_tag @attached_image.image.url %></li>

我不确定这种确切的语法是否会起作用。我做过类似的事情，但最糟糕的情况是，你想把所有你附加的图像放在一个部分，并在你得到这样的请求后刷新它（在你的create.js.erb中）：

$('#attend-images').html('<%= escape_javascript(render partial: 'images') %>');

然后_images.html.erb只是一个包含你的ul图像的部分（因为那是我假设你要附加的内容）：

<% for image in @images %>
  <ul>
  ....
  <li><%= image_tag image.image.url %></li>
  ....
  </ul>
<% end %>

Answer 3

这是因为缺少内部@attached_image.image.url主机，因此使用image_tag用于生成html img标记的url的image_path帮助程序。它不会成为s3存储的问题。

Paperclip网址无法使用image_tag

3 个答案: