jsのsetAttributeでのsrcの変換がうまくいかない

Question

pythonのflaskとjavascriptを使い開発している。
staticフォルダ内にpict_play.pngとpict_stop.png、該当のjsファイルを保存しており、同じフォルダ内でsetAttribute('src','pict_play.png')でsrcの書き換えを行ったが表示されない。

該当のソースコード

<img src="{{url_for('static',filename='pict_stop.png')}}" alt="再生状態を表す画像" >

var img=document.querySelector('img');
img.setAttribute('src','pict_play.png');

試したこと

setAttribute内のpict_play.pngをhtmlと同じように"url_for{{'static','pict_play.png')}}"と書き換えても表示されず。

補足情報（FW/ツールのバージョンなど）

pythonはanacondaのspyderを使い、js,htmlはvscで書いている。

Answer 1

PythonもFlaskも分からないのでJavaScript観点だけで答えますが、画像のパスが違うだけでは？

setAttributeでsrcを書き換えるのはともかく、提示のコードsetAttribute('src','pict_play.png')だと<img src="pict_play.png">となります。
現在のURLからの相対パスで辿れるのでしょうか。

setAttribute内のpict_play.pngをhtmlと同じように

これは.js内で行っている場合、フレームワークもしくはテンプレートの処理が行われないからだと思います。
.jsを同じくテンプレート化できれば良いですが、ひとまず、同じHTMLテンプレート内に<script>タグとしてJavaScriptのコードを書けば良さそうにも思います（そこはフレームワークなりテンプレートエンジンの仕様に沿ってください）

もしくは「とりあえず」で<img src="{{url_for('static',filename='pict_stop.png')}}" alt="再生状態を表す画像" >この結果をブラウザ開発ツールからHTMLソース確認してpict_stop.pngの前の部分を得てsetAttributeの第2引数に直書きするとか。

画像URIをhiddenに埋め込んでそこから取得して結合するというやり方も考えられます。

<input type="hidden" id="play_uri" value="{{url_for('static',filename='pict_play.png')}}">

var play_uri=document.querySelector('#play_uri');
var img=document.querySelector('img');
img.setAttribute('src',play_uri);

※画像複数扱いたいならその数だけhiddenで用意するか、hiddenでstaticのuriだけ埋め込んでファイル名だけ結合するとか、やれなくはなさそうです。

Comments

[to-kaido53]

ファイルパスは合っていたのですが、safariを使っていたため、何か不具合が発生したようでした。
Chromeで試して見た所解決いたしました。
回答ありがとうございました。
実際に記載いただいた内容でも問題なく表示されたため、ベストアンサーにさせていただきます。

[m.ts10806]

Safariだから　ではないと思います。
どういうサービスを想定されているか分かりませんが、Safariユーザーは一定はいるはずで、そのユーザーに対して想定の挙動を提供できないままなのはまずいのでは。

[to-kaido53]

調べたところ、safariでjsがうまく動かないというのは実際あるようなので、それのせいにして勝手に自己完結してました…
本日改めてsafariで実行したところ、問題なく作動したので原因を探ってみます。
ありがとうございました。

Answer 2

safariではなくChromeで試して見たところ、問題なく表示されました。