使用ERB在Javascript中设置CSS背景图像路径

Question

我试图在javascript文件中使用erb设置元素的背景图像

document.getElementById("logo").style.backgroundImage = "<%= asset_path('logo.png') %>";

但图片并未显示。

当我检查浏览器上的元素并访问为图像生成的URL时，会出现图像。

当我将backgroundImage更改为backgroundColor = "red"时，它有效。

因此，如果路径是正确的，并且用于样式化元素的js有效，那么问题是什么？

Answer 1

这不起作用，因为它不是正确的语法，你错过了url部分！

document.getElementById("logo").style.backgroundImage = "url(<%= asset_path('logo.png') %>)";

这应该可以解决问题;）

但是，为什么使用javascript来做这样的事情而不是CSS？

Answer 2

您应该使用css来执行此操作。

.logo {
  background-image: '/assets/images/logo.png'
}

作为替代方案，您可以在布局或页面erb文件中使用突出的Javascript：包含标记并使用ruby嵌入代码。