Question

文件夹如下：的项目

静态文件夹 - index.html

templates文件夹 - 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()

Answer 1

在Flask中有两种方法可以解决这个问题。

最简单的选项：您可以将images文件夹移到static目录中，并将src标记的images/newyork1.jpg属性更改为url_for('static', filename='images/newyork1.jpg)。< / p>

或者，您可以在images文件中为webapp.py目录定义一条路线，并附加<path:path>作为全能。然后使用path参数定义一个函数，该函数返回对send_from_directory的调用，其参数为images和path。确保从文件顶部的Flask导入send_from_directory。

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

使用图像渲染模板时出现404错误

1 个答案: