2016-11-23 16 views
0

フォルダ以下のとおりです。 プロジェクト404エラー

静的フォルダ - newyork.html +画像フォルダ - - newyork.jpg

テンプレートフォルダのindex.html

webapp.py

コードをコマンドラインで実行すると、画像以外はすべて動作します。何らかの理由でイメージが表示されず、Cmderプロンプトに404エラーが表示されます。ここで私が使用している私のテンプレートである:ここでは

<!doctype html> 
<title>New York</title> 
<h1>New York</h1>  
<p> 
New York is a state in the northeastern United States, and is the 27th-most extensive, fourth-most populous, and seventh-most densely populated U.S. state. New York is bordered by New Jersey and Pennsylvania to the south and Connecticut, Massachusetts, and Vermont to the east. The state has a maritime border in the Atlantic Ocean with Rhode Island, east of Long Island, as well as an international border with the Canadian provinces of Quebec to the north and Ontario to the west and north. 
</p> 
<img src="images/newyork1.jpg" alt="New York" style="width:750px;height:350px;"> 
<p> 
The state of New York, with an estimated 19.8 million residents in 2015, is often referred to as New York State to distinguish it from New York City, the state's most populous city and its economic hub. 
</p> 

は、私が使用している私のindex.htmlです:

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("#newyorkbutton").click(function(){ 
    $.get("/newyork", function(data, status){ 
     $("#city").html(data); 
    }); 
    }); 
}); 
</script> 
</head> 
<body> 
<h2>Welcome to My Travels</h2> 
<input type="submit" name="NewYork" id="newyorkbutton" value="New York"> 
<h2>Welcome to My Travels</h2> 
<div id = "city"> 
<p> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum 
</p> 

</div> 
</body> 
</html> 

そして最後に私のpythonコード私が実行している:

from flask import Flask, render_template, request 

app = Flask(__name__) 


@app.route("/") 
def root(): 
    return app.send_static_file('index.html') 

@app.route("/newyork") 
def newyork(): 
    return render_template('newyork.html') 

if __name__ == "__main__":  
    app.run() 
+0

画像を配信するコードはどこですか? –

答えて

0

これをFlaskで扱うには、いくつかのオプションがあります。

最も簡単なオプション:あなたはstaticディレクトリにimagesフォルダを移動し、あなたのimages/newyork1.jpgタグからurl_for('static', filename='images/newyork1.jpg)へのsrc属性を変更することができます。

webapp.pyファイルにimagesディレクトリのルートを定義し、<path:path>をcatch-allとして追加することができます。 パラメータを持つ関数を定義し、imagespathの引数を持つsend_from_directoryを呼び出します。あなたのファイルの一番上にFlaskからsend_from_directoryをインポートしてください。

@app.route('/images/<path:path>') 
def images(path): 
    return send_from_directory('images', path) 
+0

とても感謝しています – Dylan