从图像响应中设置 jQuery ajax 成功中的 div 背景

Posted 2023-05-09

【中文标题】从图像响应中设置 jQuery ajax 成功中的 div 背景

【英文标题】：Set div background in jQuery ajax success from an image response

【发布时间】：2016-03-16 03:10:46

【问题描述】：

我有一个要请求的控制器操作。响应如下。

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

我想要实现的是，在我的 ajax 成功函数中，我想调用一个 div 并将其背景设置为此响应图像。我怎样才能做到这一点。

我的 jquery ajax 代码是

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

这对我不起作用，不知道我做错了什么。

【问题讨论】：

您需要共享执行此操作的 AJAX 调用，而不是显示 ruby​​ 代码，因为您的问题涉及客户端而不是服务器端。 :)

@PraveenKumar 我已经编辑了代码以添加 ajax 代码。

你在哪里定义了elementId？

用实际ID编辑。

那行得通吗？ data 实际上包含什么？将console.log(data) 放在jQuery("#my_id").css('background-image', 'url(' + data + ')'); 行之后，看看data 会发生什么？

【参考方案1】：

尝试在你的 onSuccess 方法中加入类似的东西

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

【参考方案2】：

尝试在 php 中添加 base64 编码输出：

base64_encode($output);

在您的 CSS 中，执行以下操作：

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