使用 ERB 在 Javascript 中设置 CSS backgroundImage 路径

Question

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

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

但是图片不显示。

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

当我将 backgroundImage 更改为 backgroundColor = "red" 时，它起作用了。

所以如果路径是正确的，并且用于设置元素样式的 js 有效，那么问题是什么？

Answer 1

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

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

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

Answer 2

这不起作用，因为语法不正确，您缺少 url 部分！

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

这应该可以解决问题；)

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

Setting CSS backgroundImage path in Javascript with ERB