在javascript代码中访问ruby图像资源

时间:2014-07-10 23:32:55

标签: javascript ruby-on-rails

我有一个用id实现的img标记。

<img src="http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg" id="play-button" />

在我的javascript代码中,我有一个onclick事件来更改id“play-button”的图像源。图像从播放图标变为暂停图标。这是在事件中更改图像的行:

$("#play-button").attr("src", "http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg");

我想做同样的事情,但不是引用网址,我只是想从我的rails资产中使用图像文件本身。

第一部分可以完成:

<%= image_tag("play.svg"), :id => "play-button" %>

如何修改javascript行以加载pause.svg?

2 个答案:

答案 0 :(得分:0)

您应该将URL作为数据属性传递给图像标记:

<%= image_tag("play.svg", :id => "play-button", :data => { 'play-url' => image_path('play.svg'), 'pause-url' => image_path('pause.svg') } %>

然后在您的javascript中,您可以访问这些数据属性并在切换图像时使用网址:

var playButton = $("#play-button"),
    playImgSrc = playButton.data('play-url'),
    pauseImgSrc = playButton.data('pause-url');

// Switch to play button:
playButton.attr("src", playImgSrc);

// Switch to pause button:
playButton.attr("src", pauseImgSrc);

答案 1 :(得分:0)

您也可以在js中使用erb模板(your_file.js.erb):

$("#play-button").attr("src", '<%= image_tag("play.svg") %>');