如何使用 JQuery Append 从资产管道中提取图像答案

【问题标题】：How to pull image from asset pipeline with JQuery Append如何使用 JQuery Append 从资产管道中提取图像
【发布时间】：2017-09-29 20:08:07
【问题描述】：

当我使用追加时，我无法从图像文件夹中获取图像。到目前为止，我尝试使用两种不同的方法。 <%= asset_path 'image' %> 和 <%= image_tag %> 都没有插入图像。我正在取回标签本身。如何使用 jQuery 从图像文件夹中附加图像？我的代码如下。

image_insertion.coffee

inbox_avatar = $("[data-behavior='messages'][data-inbox-id='#{data.inbox_id}']")
inbox_avatar.append("<%= asset_path 'chat-icon.png' %>")

【问题讨论】：

我对 Ruby 并不太熟悉，但据我所知，asset_path 将图像的 URL 作为字符串返回。 jQuery 的 append() 方法接受 HTML。在这种情况下，您需要做的是将 URL 连接到一个有效的 <img src="..." /> 元素中。您也可以只使用站点根目录的相对路径，完全不需要任何服务器端代码。
我将 image_tag 更改为正常格式但是，它不会填充视图。 Rails 仅在我刷新页面后才定位图像文件。

【解决方案1】：

这看起来像一个直截了当的 coffee 文件。在这种情况下，您无权访问erb，例如：

"<%= asset_path 'chat-icon.png' %>"

请记住，您的 js 正在客户端运行您的 html.erb 已在服务器端呈现。

如果您想获得一个新的img html blob，您必须对服务器进行ajax 回调。

或者，如果您总是将 same img 附加到同一位置，那么我认为最简单的做法是：

【讨论】：

【解决方案2】：

如果您希望它以这种方式工作，您需要在您的文件上运行erb 引擎。将您的文件重命名为image_insertion.coffee.erb，它应该可以正常工作。

一旦图像附加到您的 div（100 只是占位符的高度和宽度），您可能还必须执行类似的操作才能实际加载图像：

$('<img src="'+ <%= asset_path 'chat-icon.png' %> +'">').load(function() {
  $(this).width(100).height(100).appendTo(image_avatar);
});

在紧要关头，您可以硬编码路径。最有可能在/assets/images/ 中。如果没有，请确保您从/assets开始路径

$('<img src="/assets/images/chat-icon.png">').load(function() {
  $(this).width(100).height(100).appendTo('#some_target');
});

【讨论】：