回形针网址不适用于 image_tag

Question

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

我刚刚想通了使用 ajax 在 jQuery-File-Upload 和 Paperclip 的帮助下上传图片，一切正常，文件上传，数据库条目成功保存。

唯一的问题是 <%= 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

我的 attach_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_path 助手，它是 image_tag 用于生成 html img 标签的 url。 s3存储不会有问题。