画像がうまく表示されません

Question

前提・実現したいこと

https://qiita.com/Gen6/items/f1636be0fe479f42b3ee
上記のwebページを見ながら、Flaskで画像アップロード機能を実装中に以下の問題が発生しました。

発生している問題

uploadsディレクトリに画像ファイルは保存されるのですが、うまく表示されません。ブラウザにはchromeを使用しています。

ステータスコード
127.0.0.1 - - [07/Dec/2019 18:05:50] "GET /login HTTP/1.1" 200 -
127.0.0.1 - - [07/Dec/2019 18:05:54] "POST /login HTTP/1.1" 302 -
127.0.0.1 - - [07/Dec/2019 18:05:54] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Dec/2019 18:06:23] "POST /send HTTP/1.1" 200 -
127.0.0.1 - - [07/Dec/2019 18:06:23] "GET /uploads/cat.png HTTP/1.1" 404 -
127.0.0.1 - - [07/Dec/2019 18:07:10] "POST /send HTTP/1.1" 200 -
127.0.0.1 - - [07/Dec/2019 18:07:10] "GET /uploads/bug.png HTTP/1.1" 404 -

該当のソースコード

python
ソースコード
import os
import sqlite3
from flask import Flask, render_template, request, redirect, url_for, send_from_directory, session
from werkzeug.utils import secure_filename
app = Flask(__name__)

UPLOAD_FOLDER = './uploads'
ALLOWED_EXTENSIONS = set(['png', 'jpg', 'gif'])
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.config['SECRET_KEY'] = os.urandom(24)

def allowed_file(filename):
    return '.' in filename and \
        filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS

@app.route('/')
def index():
    if 'username' in session:
        return render_template('index.html')
    return '''
        <p>ログインしてください</p>
    '''

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        if username == 'admin':
            session['username'] = request.form['username']
            return redirect(url_for('index'))
        else:
            return '''<p>ユーザー名が違います</p>'''
    return '''
        <form action="" method="post">
            <p><input type="text" name="username">
            <p><input type="submit" value="Login">
        </form>
    '''

@app.route('/logout')
def logout():
    session.pop('username', None)
    return redirect(url_for('index'))

@app.route('/send', methods=['GET', 'POST'])
def send():
    if request.method == 'POST':
        img_file = request.files['img_file']
        if img_file and allowed_file(img_file.filename):
            filename = secure_filename(img_file.filename)
            img_file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
            img_url = '/uploads/' + filename
            return render_template('index.html', img_url=img_url)
        else:
            return ''' <p>許可されていない拡張子です</p> '''
    else:
        return redirect(url_for('index'))

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

if __name__ == '__main__':
    app.debug = True
    app.run()

試したこと

https://qiita.com/keimoriyama/items/7c935c91e95d857714fb
似たような上記のコードでも試してみましたが、同様の問題が発生しました。

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

python-flask/-flaskr/
| 　├ templates/-base.html
| 　 |
| | |-index.html
| |-upload.py
|-uploads/-cat.png
ファイル構造は以上となります。 　
cat.pngがアップロードした画像ファイルです。

Comments

[Lhankor_Mhy]

画像へのリクエストにはどのような応答が返ってきていますか？　ステータスコードなどをご提示いただけますか？

[kanno_mio]

回答ありがとうございます。ファイル構造が間違っていました。uploadsディレクトリをupload.pyより高い位置に作っていました。uploadsディレクトリをupload.pyと同じ階層に作成することで解決しました。次からは、質問する際にはステータスコードも記述するよう心掛けたいと思います。お手数をおかけしました。

Answer 1

https://qiita.com/Gen6/items/f1636be0fe479f42b3eeのソースをコピペしても、kanno_mioさんのソースをコピペしても、どちらも画像が表示できました。

間違っているところを探さずに、最初からコピペし直してみてはいかがでしょうか？

画像の表示は、kanno_mioさんの場合は<img src="/uploads/cat.png">で処理されているはずですが以下の様なフォルダ/ファイル構造になっていますか？

│  app.py
│
├─templates
│      base.html
│      index.html
│
└─uploads
        mail.png

Comments

[kanno_mio]

ありがとうございます。ファイル構造が間違っていました。uploadsディレクトリをupload.pyより高い位置に作っていました。uploadsディレクトリをupload.pyと同じ階層に作成することで解決しました。お手数をおかけしました。

Answer 2

画像へのパスが、絶対パスになっているからではないでしょうか？
実際動かして確認してはいませんが、下記のように修正すればいける気がします。

img_url = '/uploads/' + filename
↓
img_url = './uploads/' + filename

もしくは

img_url = url_for('uploaded_file', filename=filename)

Comments

[kanno_mio]

回答ありがとうございます。ファイル構造が間違っていました。uploadsディレクトリをupload.pyより高い位置に作っていました。uploadsディレクトリをupload.pyと同じ階層に作成することで解決しました。次からは、質問の前に階層とパスの指定に気を配りたいと思います。お手数をおかけしました。