来自javascript css的rails asset-url

Question

我有一个外部javascript插件，有很多像这样的代码，其中image src属性是动态构建的。

$prod.append("<img class='fx_shadow' id='shd_" + i + "' + src='" + folderAssets + "/shadow_fx.png' />");

使用rails 4.1+，我正在预编译此外部代码提供的相关图像和资产以及上面的参考资料。当然，图像无法在生产中加载，因为使用直接src属性不会捕获已消化和预编译图像的指纹。

如何从外部 javascript 文件中调用asset_url方法（通过摘要输出正确的资产文件名），而不是 css 文件？ （这个javascript不是一个宁静的模板js.erb文件，而是一个包含在清单中的js文件。）

此外，有没有一种优雅的方式来接近和重构这个？

Answer 1

解决方案1 ​​

添加功能

function imagePath(image){
    return "http://" + window.location.host + "/assets/"+ image;
}

$prod.append("<img class='fx_shadow' id='shd_" + i + "' + src=imagePath(image) />");

解决方案2

将文件从js更改为js.erb

$prod.append("<img class='fx_shadow' id='shd_" + i + "' + src='<%= asset_path('shadow_fx.png') %>' />");

Answer 2

结帐2.3.3 JavaScript/CoffeeScript and ERB。您需要将.js更改为.js.erb扩展名，例如： javascript_filename.js.erb 。然后就可以这样使用它：

$prod.append("<img class='fx_shadow' id='shd_" + i + "' + src='<%= asset_path('shadow_fx.png') %>' />");

或：

var image = $("<%= image_tag 'shadow_fx.png', :class => 'fx_shadow' %>");
image.attr('id', 'shd_'+i);
$prod.append(image);

在第二个选项中，您必须将image_tag作为图片元素，然后为其添加id属性，因为i是一个JavaScript变量，这就是为什么它必须可以单独添加。