2016-12-25 8 views
3

tl; dr version:プロジェクトディレクトリにない画像をロードするにはどうすればよいですか?Flaskアプリケーション:現在の作業ディレクトリから画像をロードする

私は(楽しいプロジェクトとして)ブラウザの現在の作業ディレクトリからランダムなイメージを読み込むコマンドラインアプリケーションとして設計されたFlaskアプリケーションを構築しています。アプリの構造は次のようになります。

entry_points={ 
    'console_scripts': [ 
     'imgdisplay=imgdisplay.imgdisplay:start_server' 
    ] 

これは私がどこからでも、コマンドラインアプリimgdisplayを開始することができます:私setup.py

+-- imgdisplay/ 
    +-- imgdisplay/ 
     +-- imgdisplay.py 
     +-- static/ 
      +-- styling.css 
     +-- templates/ 
      +-- img.html 
    +-- setup.py 
    +-- LICENSE 
    +-- README.md 

は次のとおりですentry_pointsキーワード引数を持っています。私はこの部分が問題なく動作することを確認しました。

マイimgdisplay.pyコードは次のようになります。私のimg.htmlテンプレートは以下のようになります

from flask import Flask, render_template 
import webview 
import click 
from random import choice 
import os 
import os.path as osp 
import logging 

app = Flask(__name__) 


# logging.setLevel(logging.DEBUG) 

@app.route('/') 
def hello(name=None): 
    files = os.listdir(os.getcwd()) 
    image = choice([f for f in files if f[-4:] == '.jpg']) 
    # tried the following line, but didn't work. 
    # image = osp.join(os.getcwd(), image) 
    # logging.info(image) 
    return render_template('img.html', name=name, files=files, image=image) 


@click.command() 
@click.option('--port', default=5000, help='Port', prompt='Port') 
@click.option('--host', default='localhost', help='Host', prompt='Host') 
def start_server(port=5000, host='localhost'): 
    app.run(host='localhost', port=port) 


if __name__ == '__main__': 
    start_server() 

<!doctype html> 
<head> 
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"></link> 
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styling.css') }}"> 
</head> 
<body> 
    <title>Hello from Flask</title> 
    {% if name %} 
     <h1>Hello {{ name }}!</h1> 
    {% else %} 
     <h1>Hello, World!</h1> 
    {% endif %} 

    {{ image }} 

    {% if image %} 
     <img src="{{ image }}"></img> 
    {% endif %} 

</body> 

すべてのすべてで、それは非常に単純なフラスコアプリです。私のようなnoobが作るだろう。

私のデスクトップには、images/と呼ばれるフォルダが1つあります。ブラウザにファイル名の文字列を表示することはできますが、イメージを表示することはできません。ブラウザにイメージがロードされているのを見たいと思っていますが、イメージが見つからないことを示すアイコンが表示されます。ここで私のノーバネスを許してください、しかし私はここで欠けている重要な概念は何ですか?このような中/home/yetship/images/test.jpgとしてパスを入れると

+0

誰かが文脈を求めている場合は、これをRaspberry Piを使用して新しい画像をドロップしてブラウザにリロードできるフォルダへのフロントエンドインターフェイスとして構築しようとしています。ここで創造しようとしている:-) – ericmjl

+0

それは本文に述べられています。 「画像ファイル名はブラウザに表示できますが、画像を表示することはできません。" – ericmjl

+0

申し訳ありませんが、私は初心者のSOユーザーであるというこの認識からの不満を感じています。私がこれまで示してきたことはまさに私がこれまで行ってきたことです。私のSOの経験はデータサイエンスの世界にありました。あなたの質問に対する私の答えは次のとおりです。イメージは要求しませんが、私はそうするべきですか?ここにはエラーはありません。ディレクトリ構造は最上部に掲載されています) – ericmjl

答えて

1

私は私のブラウザでファイル名の文字列を表示することができ

それはのないブラウザのネットワーク機能で、それは、しかし、ブラウザローカルファイルシステムの機能ですこのようなHTML:あなたがURLにあなたのウェブサイトを訪問した場合ので

<html> 
    <body> 
     <img src="/home/yetship/images"></img> 
    </body> 
</html> 

それは、それが動作しないことになるのは間違いないだろう:http://localhost:8080、imgタグではなく、パス/home/yetship/imagesとあなたのPC内の画像を見つけることができません、それがわかりますhttp://localhost:8080/home/yetship/imagesの画像なので、あなたはそれを表示させる場合は、あなたのimageディレクトリ静的なディレクトリを作成するthis guideを、次の必要があり、あなたのようにimgタグを作成する必要があります。代わりに

<img src="/home/yetship/image/test.jpg"></img> 

<img src="image/test.jpg"></img> 

とフラスコはあなたのimageディレクトリの画像を見つけ、あなたのブラウザに表示します。

こちらがお役に立てば幸いです。

関連する問題