2016-11-23 85 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