Question

当我使用追加时，我无法从images文件夹中获取图像。到目前为止，我尝试使用两种不同的方法。 <%= 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' %>")

Answer 1

这看起来像一个直接的coffee文件。在这种情况下，您无法访问erb，如：

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

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

如果您想获得新的img html blob，则必须回拨ajax来回服务器。

或者，如果您总是在同一位置附加相同的 img，那么我认为最简单的方法是：

在图像包装器内部渲染chat-icon.png服务器端

使用CSS来设置包装器display: none

使用js执行$('#wrapper-id').show()或类似的

Answer 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');
});

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

2 个答案: