Rails）JSを用いて画像を一定時間で切替し続けたい。しかしアセットパイプラインの関係で…

Question

以下の記事を参考に

参考を用いて実装したい。
参考内のコードです。

<img src="0.png" name="sushi">

<script type="text/javascript">
img = new Array("0.png","1.png","2.png","3.png","4.png","5.png"); //*1
count = -1; //*2
imgTimer();

function imgTimer() {
	//画像番号
	count++; //*3
	//画像の枚数確認
	if (count == img.length) count = 0; //*4
	//画像出力
	document.sushi.src = img[count]; //*5
	//次のタイマー呼びだし
	setTimeout("imgTimer()",1000); //*6
}
</script>

このコードの問題点

アセットパイプライン？の関係で、Rails内で画像パスが変換されてしまうので、
imgTimer()の関数自体は発動しても、1.png,2.pngの指定では、画像が表示されません。

解決策

どうすればいいでしょうか。ご教授いただける方、お願いします。

追伸

GIFではだめなのです。

#補足

slimを用いています。

= image_tag "shared/0.png",name:"gazou",style: "width:440px; "

javascript:
	img = new Array("shared/1.png","shared/2.png","shared/3.png","shared/4.png","shared/5.png"); 
	count = -1; 
	imgTimer();

	function imgTimer() {
	    //画像番号
	    count++;
	    //画像の枚数確認
	    if (count == img.length) count = 0; 
	    //画像出力
	    document.gazou.src = img[count]; 
	    //次のタイマー呼びだし
	    setTimeout("imgTimer()",1000); 
	}

こうしているのですが、なかなかうまくいかないです。

Answer 1

1.png,2.pngの指定では、画像が表示されません。

では、やりようはないですよね
画像の絶対位置もしくは相対位置をしていしても必ずしもデータが拾えないということでしょうか？
そうでなければ普通に取れそうですが

なお画像のいれかえについては
new Image()であらかじめimageオブジェクトを作っておくほうがよいと思います

Comments

[退会済みユーザー]

お返事ありがとうございます。補足を追記しました。
shared/0.pngは表示されるのですが、
JSで制御しているshared/1.png以降が画像を読み込れない状態です。

ブラウザで確認してみると、JSで制御しているshared/1.png以降の画像は、
アセットパイプラインを考慮していないので、画像を引き出せていないようです。
それをどうすればいいかなあ。という感じです。

[退会済みユーザー]

リロード直前は
<img style="width:440px;" name="gazou" src="/assets/shared/0-bbc02cd1b2d0dbc865aab17e603a7e892622d0f9a77a6a4982dd5c13b6b41654.png" alt="0">

なのですが、JSで挙動している次の画像からは、

<img style="width:440px;" name="gazou" src="shared/1.png" alt="0">
<img style="width:440px;" name="gazou" src="shared/2.png" alt="0">
<img style="width:440px;" name="gazou" src="shared/3.png" alt="0">
.
.
.
と変化していくのですが、これでは画像が引き出せないようです。