Rails 3 正确的 image_tag 转换答案

【问题标题】：Rails 3 correct image_tag conversionRails 3 正确的 image_tag 转换
【发布时间】：2013-07-12 04:09:13
【问题描述】：

我正在尝试将视差效果代码转换为在 Rails 3 应用程序上运行。我无法让它运行，所以我想知道我是否正确转换了这段代码。每组的第一行是原始代码。每组的第二行是我的转换。谁能告诉我这是否正确？

<article class="slide" id="showcasing" style="background:   url('backgrounds/landscape.png') repeat-x top center;">
<%= image_tag("backgrounds/landscape.png", :class => "slide", :id => "showcasing", :style => "background: repeat-x top center") %>

<img class="asset left-30 sp600 t120 z1" src="slides/scene1/macbook.png" />
<%= image_tag("slides/scene1/macbook.png", :class => "asset: left-30 sp600 t120 z1") %>

<article class="slide" id="ideas" style="background: url('backgrounds/aqua.jpg') repeat-x top center;">
<%= image_tag("backgrounds/aqua.jpg", :class => "slide", :id => "ideas", :style => "background: url('backgrounds/aqua.jpg') repeat-x top center") %>

<img class="asset left-480 sp600 t260 z1" src="img/slides/scene2/left.png" />
<%= image_tag("slides/scene2/left.png", :class => "asset left-480 sp600 t260 z1") %>

<img class="asset left-210 sp600 t213 z2" src="img/slides/scene2/middle.png" />
<%= image_tag("slides/scene2/middle.png", :class => "asset left-210 sp600 t213 z2") %>

<img class="asset left60 sp600 t260 z1" src="img/slides/scene2/right.png" />
<%= image_tag("slides/scene2/right.png", :class => "asset left60 sp600 t260 z1") %>

【问题讨论】：

如果您的 HTML 是静态的，则无需使用 ERB，因此您的所有第一行都可以按原样进行。
我想我需要将其更改为 ERB，因为视差效果不起作用。
@user2358800 all image_tag 将渲染成您已经拥有的静态图像标签。您需要通过浏览器控制台进一步调试。查看源代码并确保 image_tag 呈现正确的 html。
图片路径是否正确？服务器日志或浏览器中是否有任何错误？

标签： javascript css ruby-on-rails ruby-on-rails-3 parallax

【解决方案1】：

每个带有<article> 标签的人都不对，因为image_tag 只会产生<img /> 标签。您应该使用 image_path 生成一个 url 并将其放在 style="background: url()" (image_path API) 中。

其他代码应该是这样的：

<%= image_tag("slides/scene1/macbook.png", :class => "asset left-30 sp600 t120 z1") %>

【讨论】：

我按照您的建议更正了
标记，现在这些图像出现了。但是在第二行，除非我删除 :class 部分，否则图像不会显示。然后图像只是静态的，没有效果。这是否意味着js没有被读取？
@user2358800 第二个image_tag在:class值中"asset"后面多了一个:，你可以试试去掉。
图像在屏幕上显示的唯一方法是我从该行中删除 :class 部分。对于每个“image_tag”行都是如此。为什么是这样？我错过了什么。这些是 flexslider 的一部分，但它不起作用。