Pythonにて、imgタグsrc属性に画像のURLを設定したのに画像が表示されない。

実現したいこと

webアプリにて、ユーザが現在設定しているアイコン画像をプロフィール設定画面で表示させたいです。

発生している問題・分からないこと

画像(pngファイル)のURL(C:から始まるローカルファイルのパス)は、下記のPython①でeditpf.html(HTML①のコードが含まれるhtmlファイル)に引数ic_pathで与えます。
このパスをHのimg src属性に設定して画像を表示させようと考えてます。
しかし、引数が適切にhtmlファイルに渡されており、img srcに適切に設定されているはずなのに画像が表示されません。src属性を画面上の文字列に表示させて確認したらfile:///から始まるpngファイルのパス名でした。

該当のソースコード

Python①
1@app.route('/editpf')
2def editpf():
3    user=request.args.get('user', None)
4    icon_path, profile = bbs_editpf.load_profile(user)
5    return render_template('editpf.html', uname=user, ic_path=icon_path, pf=profile)

HTML①
1<fieldset>
2        <input type="hidden" name="uname" value="{{ uname }}">
3        <img src="{{ ic_path }}" id="iconImg" width="50" height="50">
4        <label class="icon">
5          <input type="file" name="icon" id="icon" accept="image/*" onchange="changeImg(this)"> 画像を選択
6        </label>
7        <div>
8          <label>性別</label>
9          <input type="radio" name="gender" value=0 class="radio"> 男
10          <input type="radio" name="gender" value=1 class="radio"> 女
11          <input type="radio" name="gender" value=2 class="radio"> その他
12        </div>
13        <div>
14          <label for="bday">生年月日</label>
15          <input type="date" name="bday" id="bday" value={{ pf.bday }}>
16        </div>
17        <div>
18          <label for="height">身長</label>
19          <input type="number" name="height" id="height" value={{ pf.height }}> cm
20        </div>
21        <div>
22          <label for="weight">体重</label>
23          <input type="number" name="weight" id="weight" value={{ pf.weight }}> kg
24        </div>
25      <button type="submit"
26              class="pure-button pure-button-primary">
27      変更</button>
28    </fieldset>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

父親の助言で、pyファイルをwebサーバ上で実行する(python -m http.server 5000をコマンドラインで実行する)ことも試してみたのですが、htmlファイルは実行できるのに、pyファイルは実行できません。
readAsDataURLでデータURLを生成し、img srcにこのURLを設定することもやろうとしたのですが、パス名だけではpngファイルのBlob(pngファイルそのもの?)を取得する方法が分からなくて断念しました。

補足

フレームワークはFlaskです。

meg_

2024/03/12 09:24

> webアプリにてフレームワークの情報も質問や質問タグに追記されると回答がつきやすくなるかと思います。

otn

2024/03/13 17:06

詳細不明なので一般論ですが、画像が表示されないということは、srcのURLが実際のpngファイルのパスでないということは99%確実なので、どういうファイルを指定すると、HTML上ではどうなっているかを確認すると、間違いの場所が特定できるのではないかと思います。のこり1%は、パスは正しいけど、何らかのセキュリティー設定でローカルファイルがアクセスできないとか。

gakut

2024/03/14 16:36

ローカルでのパス(C:から始まるローカルエクスプローラーでの絶対パス)にしていたのがいけなかったと思います。 flaskでpythonファイルを実行したサーバのURL(http:～)をルートとする画像ファイルの絶対パスをsrcに入れると成功しました。サーバ上ではC:がルートではないので、C:をルートとするローカルパスでは参照不可だったのです。

行動規範の内容に同意します

回答1件

ベストアンサー

引数が適切にhtmlファイルに渡されており、img srcに適切に設定されているはず

『はず』というのが気になりました。
期待と現実を切り分けて、実際にはどうなっているのかを書いてください。

画像(pngファイル)のURL(C:から始まるローカルファイルのパス)

ローカルの画像リソースを表示するには、HTMLもローカルでなくてはいけないと思います。ですので、『C:から始まるローカルファイルのパス』が本当にそのとおりであり、HTMLがローカルサーバで動作しているならば、動作しないでしょう。

解決方法としては、画像をローカルファイルのパスで表示するのをやめることです。
なんらかのフレームワークを使っているようですから、その設定に従うといいでしょう。
たとえば、flaskであればここに書かれています。
https://msiz07-flask-docs-ja.readthedocs.io/ja/latest/quickstart.html#static-files

投稿2024/03/12 10:32