Flaskで画像を動的にテンプレートに貼り付けたい

Question

Flaskでテンプレートに画像を動的に貼り付けたいのですがうまくいきません。

以下のように、静的には画像を表示できるのですが、

<script type="text/javascript">
$(function(){	
	$("#ImgDisplay").children('img').attr("src", "{{ url_for('static', filename='jpgs/sample01.jpg') }}" ) ;
});
</script>
.....
<div id="ImgDisplay">
  <img alt=".">
</div>

これを動的に貼り付けるのはどうするのでしょうか？

例えば以下のようにしても、

<script type="text/javascript">
$(function(){
	var fn = "jpgs/sample01.jpg" ;		
	$("#ImgDisplay").children('img').attr("src", "{{ url_for('static', filename='" + fn + "') }}" ) ;
});
</script>

では、file not found になります。

他にもカッコで囲んだりしたのですが、うまく表示されません。

これはどのようにしたらいいのでしょう？

Answer 1

jQuery触ったことないので推測の回答です。
{{ url_for(～) }}ではstatic配下のURL（文字列）に置き換わるだけなので、以下のようにその文字列にfn変数値を足すだけでよいかと思います。
$("#ImgDisplay").children('img').attr("src", "{{ url_for('static', filename='/') }}" + fn ) ;
うまくいかない場合はGenerating URLsで示されているようにurl_forの結果を変数に入れるように修正してみてください。

Comments

[退会済みユーザー]

can110さんありがとうございます。
一発で解決しました。

url_for, static などで3時間ほど調べたのですが、おっしゃるようなコードを発見できませんでした。
これは、私の能力では考えてわかるものではないですね。

もっと早く質問すればよかった。
助かりました。