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

【问题标题】：404 error when rendering template with image使用图像渲染模板时出现 404 错误
【发布时间】：2016-11-23 20:54:52
【问题描述】：

文件夹如下：项目

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

【问题讨论】：

那么提供图片的代码在哪里？

标签： javascript python html image templates

【解决方案1】：

在 Flask 中有几个选项可以处理这个问题。

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

或者您可以在您的webapp.py 文件中为您的images 目录定义一个路由，并附加一个<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)

【讨论】：