質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.61%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 245

kanno_mio

score 5

前提・実現したいこと

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がアップロードした画像ファイルです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2019/12/06 10:14

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

    キャンセル

  • kanno_mio

    2019/12/07 18:43

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

    キャンセル

回答 2

checkベストアンサー

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/07 18:31

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

    キャンセル

+1

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

img_url = '/uploads/' + filename

img_url = './uploads/' + filename

もしくは

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/07 18:34

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る