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

【问题标题】：Setting CSS backgroundImage path in Javascript with ERB使用 ERB 在 Javascript 中设置 CSS backgroundImage 路径
【发布时间】：2015-02-15 19:32:21
【问题描述】：

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

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

但图像不显示。

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

当我将backgroundImage 更改为backgroundColor = "red" 时，它可以工作。

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

【问题讨论】：

@OhHendrie 如果我是你，我会删除该评论
guides.rubyonrails.org/working_with_javascript_in_rails.html
该指南中没有任何地方说在 javascript 文件中使用 ERB。为什么需要这样做？
请阅读并返回
您绝对可以在 JS 视图文件中使用 ERB 来渲染 JS。

标签： javascript ruby-on-rails ruby erb

【解决方案1】：

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

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

这应该可以解决问题；）

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

【讨论】：

谢谢。这只是更大功能中的一行。

【解决方案2】：

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

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

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

【讨论】：