Set div background in jQuery ajax success from an image response

Question

I have a controller action that I am going to request. The response is as follows.

return send_file(@image_path,
  :disposition => 'inline',
  :filename => @image.title,
  :type => @image.content_type)

What I want to achieve is, in my ajax success function, I would like to call a div and set its background to this response image. How can I achieve this.

My jquery ajax code is

jQuery.get('url(:open_image, :id => 'someID' )}').
  success(function(data, status, xhr) {
    jQuery("#my_id").css('background-image', 'url(' + data + ')');
})

This is not working for me, don't know what I did wrong.

Answer 1

Try putting something like this in your onSuccess method

$('myOjbect').css('background-image', 'url(' + imageUrl + ')');

Answer 2

Try adding a base64 encoded output in you PHP:

base64_encode($output);

In your CSS, do this:

jQuery("#my_id").css('background-image', 'url("data:image/png;base64,' + data + ')');