2016-11-23 35 views
0

夾,如下所示: 項目404錯誤與圖像渲染模板時有

靜態文件夾 - index.html的

模板文件夾 - newyork.html +圖像文件夾 - newyork.jpg

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

有與這瓶處理幾個選項。

簡單的選項:您可以將文件夾images進入你的static目錄,並改變你從images/newyork1.jpg標籤url_for('static', filename='images/newyork1.jpg)src屬性。

或者您可以在webapp.py文件中爲您的images目錄定義一條路線,並附加<path:path>作爲全部抓取。然後定義一個path參數返回send_from_directory的論據imagespath呼叫的功能。確保你從瓶進口send_from_directory你的文件的頂部。

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

得到它的工作非常感謝 – Dylan