swapImage src: 'image2.jpg' 在 Rails 3.1 中没有响应

Posted 2023-05-09

【中文标题】swapImage src: \'image2.jpg\' 在 Rails 3.1 中没有响应

【英文标题】：swapImage src: ‘image2.jpg’ doesn't respond in Rails 3.1swapImage src: 'image2.jpg' 在 Rails 3.1 中没有响应

【发布时间】：2013-09-04 08:55:37

【问题描述】：

我正在将我的 Rails 应用程序从 2.3 升级到 3.2，但我现在卡在 3.1 上。

我目前正在努力将对图像文件名的引用转换为适用于资产管道的语法。在这个问题上我需要帮助的主要地方是我的按钮翻转 swapImage 语句。这是一个例子：

<%= image_submit_tag "signin.jpg", :class => "swapImage  src: '#image_path('signinHover.jpg')' " %>

这在开发中有效。但是当我将此代码部署到生产环境时，翻转仍然不起作用。我根本没有得到明显的翻转响应。此外，当我查看源代码时，单引号仍然出现转义：

<input class="swapImage src: &#x27;/assets/signinHover.jpg&#x27;" src="/assets/signin.jpg" type="image" />

我猜这可能是我的问题的一部分。

我还想知道我是否没有使用资产管道正确加载我的 javascript/jquery 资产。但是当我检查https://staging.genlighten.com/assets/application.js 时，我看到swapImage 代码显示得很好。

我很感激有关如何在 Rails 3.1 中正确实现 swapImage 的建议，并为资产管道提供的图像提供正确的语法。或者，是否有更好的方法来替代我应该使用的翻转按钮图像？

非常感谢，

迪恩·理查森 Genlighten.com

【问题讨论】：

为什么要在css类中放置一个看起来像json对象的东西？那是非常奇怪的架构。

rails 是否应该在将其作为 html 输出发送之前在那里输出图像路径？

【参考方案1】：

这里有几件事需要解决。 首先，您在输入标签上有一个 src 属性。这两件事不能混为一谈。 您需要使用 CSS 为您的输入设置样式，或者在其中放置一个图像元素以使其正常工作。

由于您希望获得悬停图像切换效果，我建议您使用 CSS 精灵。一旦鼠标悬停在目标上就加载图像会破坏用户体验，因为在浏览器设法加载内容之前，您的按钮将完全消失。

查看一千万个 bajillion css sprites 教程中的一个，比如这个（我在 Goog 上找到的第一个）：

http://css-tricks.com/css-sprites/

现在。如果您打算在标签本身中放置一个备用源并在悬停时加载它，我建议您将它放在数据属性中：

<img class="swapImage" data-image-swap="src: &#x27;/assets/signinHover.jpg&#x27;" src="/assets/signin.jpg" />

请注意，这是一个图像标签，而不是输入。您必须在某处添加输入：/

您可以发布您想要输出的代码吗？此外，最好包含您的 swapImage() 方法，以便我们查看。

同样，使用 javascript 来实现悬停效果是不好的做法。我强烈建议你使用精灵。

高度。 :)