Rails：如何在javascript中更改图像？

Question

这是我的 javascript 代码：

  //changing of eye icon of status
  $('.status-visible').on('click', (e) => {
    if ($(e.currentTarget.children[0]).attr('src') == '../assets/visible.png') {
      $(e.currentTarget.children[0]).attr('src', '../assets/notvisible.png');
      $(e.currentTarget).attr('uk-tooltip', 'Not Visible');
    }
    else {
      $(e.currentTarget.children[0]).attr('src', '../assets/visible.png');
      $(e.currentTarget).attr('uk-tooltip', 'Visible');
    }
  });

它可以在本地运行，但是当我将它上传到 heroku 并运行 assets:precompile 时，它​​会生成新的图像名称。

这是我的 html 代码：

<td>
                        <button class="uk-border-rounded status-visible" uk-tooltip='Visible'>
                          <img src="../assets/visible.png" class='uk-icon-image' />
                        </button>
                      </td>

现在，每次我有新资产并运行 rails assets:precompile 它将生成新的图像路径 这样它就不会在暂存时工作。

Answer 1

您可以将图像移动到public/ 文件夹并直接引用它们：

  $('.status-visible').on('click', (e) => {
    if ($(e.currentTarget.children[0]).attr('src') == '/visible.png') {
      $(e.currentTarget.children[0]).attr('src', '/notvisible.png');
      $(e.currentTarget).attr('uk-tooltip', 'Not Visible');
    }
    else {
      $(e.currentTarget.children[0]).attr('src', '/visible.png');
      $(e.currentTarget).attr('uk-tooltip', 'Visible');
    }
  });

HTML

<td>
  <button class="uk-border-rounded status-visible" uk-tooltip='Visible'>
    <img src="/visible.png" class='uk-icon-image' />
  </button>
</td>