需要 Rails 应用中本机 HTML 的图像路径

Question

Rails4，Ruby2，jQuery1.11

我的应用程序包含使用 DataTables 构建的表格。我正在使用 jQuery 来修改那些表的 HTML。我正在尝试添加 assets/images 中的图像，但我似乎无法确定访问它所需的路径。由于我在预处理后编辑 HTML，它是原生的 HTML，我不能在其中使用 Rails 变量。

我可以 Rails 识别图像在那里，或者更具体地说 Ruby 我的。由于我使用的是 JavaScript，路径“../images”可以访问图像。但是，这不适用于 HTML.

我的问题是，鉴于图像在 app/assets/images 中，我必须为本机 HTML 指定什么路径才能访问该图像？

$('input[type=search]').each(function () {
    var $this = $(this);
    $this.addClass("theSearch");
    $('.theSearch')
        .append('<img id="clrImg" class="clrSearch" src="../images/DeleteRed.png" />');
...

FWIW，这将是一个在单击时清除搜索字段的按钮。现在，它正在使用 "X" 工作，但这很丑....

我应该注意到，我已经尝试了许多 /app/assets/images/...

的排列组合

Answer 1

想通了...

资产不仅经过预处理，而且在 public 中进行了丑化和安装。我将它复制到 public/assets/images 并且能够以 assets/images/DeleteRed.png.

的形式访问它

谢谢...

更新：这仅在某些情况下有效。当我使用该应用程序时，我发现 URI 发生了变化。绝对 URI 始终有效，但存在一些问题：

http://myprefix.mydomain.com/assets/images/DeleteRed.png

例如，当我将其推送到生产环境时，myprefix 或 mydomain 发生变化，这将失败。最好测试系统变量，搭建测试、开发、生产等路径

Answer 2

如果您的 javascript 文件以 .js.erb 扩展名存储在 app/assets/javascripts 中，您可以像在 HTML 中一样插入 Ruby 代码查看：

$('input[type=search]').each(function () {
  // ...
  $('.theSearch')
    .append('<img id="clrImg" class="clrSearch" src="<%= image_path('DeleteRed.png') %>" />');
  // ...
});

js文件会被asset pipeline自动预处理，image_path Rails helper会保证路径永远正确（如果你的图片存放在app/assets/images，即 — 无需将其移动到 public！）。

需要 Rails 应用中本机 HTML 的图像路径

Need path to image for native HTML within a Rails app

javascript

jquery

html

ruby-on-rails