回形针网址不适用于image_tag

Question

I know this sounds like a stupid question, but I really don't see the root cause right now...

I just figured out to upload image using ajax with the help of jQuery-File-Upload and Paperclip, everything is quite fine, the file is uploaded, the database entry is successfully saved.

The only problem is the <%= image_tag @attached_image.image.url %> is not working in my create.js.erb, with which I would like to make an entry on the view with javascript. But the url of the uploaded file instance is correct.

it's working if I do:

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

but it's not working if I do, which is from Paperclips Github Readme:

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

and there's no exception raised in the console, there's just nothing comes up. I am really confused..and is there anyway that I could debug the js.erb processing in the browser?

My view:

<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>

My controller:

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

My attached_images/create.js.erb:

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

My model:

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

  has_attached_file :image
end

Answer 1

I found the problem, it's because that I missed the escape_javascript function, the following code works very well.

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

many thanks to @varatis, you remind me of that.

Answer 2

Maybe something along the lines of this would work:

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

where _images.html.erb is partial under the same folder that looks like:

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

I'm unsure if this exact syntax would work though. I've done things similar but worst case scenario, you make want to just put all of your attached images in a partial, and refresh it once you get the request like so (in your create.js.erb):

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

and then _images.html.erb is just a partial which contains your ul of images (since that's what I'm assuming you want to append to):

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

Answer 3

This is because inside @attached_image.image.url host is missing hence use the image_path helper which is image_tag uses to generate the url for html img tag. It wont be problem for s3 storage.