如何在Rails中使用image_tag和jQuery实现图片切换？

问题根源 #

Rails 6默认使用Webpacker管理JavaScript文件，application.js不会经过ERB模板引擎解析，你写在JS里的<%= asset_path('minus.png') %>会被原封不动输出为字符串，导致图片src指向无效路径，所以显示破损。

解决方案：通过Data属性传递图片路径 #

这种方式既符合Rails的asset pipeline规范，又能实现点击切换图片的需求，具体修改如下：

1. 修改视图代码：
   在image_tag中添加data属性，预先存储两张图片的正确路径：

<%= image_tag('plus.png', size: '15x15', id: "img-white", 
              data: { 
                plus_src: asset_path('plus.png'), 
                minus_src: asset_path('minus.png') 
              }) %>

2. 修改application.js代码：
   通过jQuery读取data属性里的路径，实现点击切换逻辑：

$('#img-white').click(function(){
  const $img = $(this);
  // 判断当前显示的是加号还是减号图片，切换路径
  if ($img.attr('src') === $img.data('plusSrc')) {
    $img.attr('src', $img.data('minusSrc'));
  } else {
    $img.attr('src', $img.data('plusSrc'));
  }
});

额外说明 #

• 部署到Heroku时，确保你已经执行了rails assets:precompile（Heroku会自动执行），asset_path会生成带指纹的正确路径，避免缓存问题。
• 这种方法不需要修改JS文件的后缀，也不需要额外配置Webpacker，是Rails 6中处理此类场景的标准方式。

内容的提问来源于stack exchange，提问作者John Cowan