Flask电商项目：coats.html图片正常，product.html图片无法显示求助

这问题我之前做电商项目时也踩过坑，本质是相对路径和绝对路径的解析差异导致的！

为什么会出现这个问题？ #

咱们先看两个页面的URL结构：

• /coats 是根级别路由，当页面里用static/images/coats/{{ product.image1 }}这种相对路径时，浏览器会自动把它解析成 http://你的域名/static/images/coats/xxx.jpg，路径完全正确，所以图片能正常加载。
• /product/<id> 是二级路由（比如/product/1），浏览器会把相对路径当成是在/product/这个子目录下查找资源，最终解析成 http://你的域名/product/static/images/coats/xxx.jpg——这个路径根本不存在，自然加载失败。

两种可行的解决办法 #

方法1：用Flask的url_for生成静态资源路径（推荐）

这是最稳妥的方式，不管你的路由结构怎么变，url_for都会自动生成正确的绝对路径。修改product.html里的图片标签：

<img src="{{ url_for('static', filename='images/coats/' + product.image1) }}" class="image">

甚至可以把coats.html里的图片路径也改成这种写法，统一规范，避免以后再踩类似的坑。

方法2：给路径添加根目录斜杠

如果不想用url_for，可以直接把相对路径改成绝对路径，只需要在开头加个斜杠：

<img src="/static/images/coats/{{ product.image1 }}" class="image">

斜杠会告诉浏览器从域名的根目录开始查找资源，而不是当前页面的相对路径。

小提醒 #

虽然coats.html现在能正常工作，但依赖相对路径的写法其实很脆弱——如果以后你把coats路由改成/products/coats这种多级路由，同样会出现图片加载失败的问题。所以建议所有静态资源的路径都统一用url_for生成，一劳永逸。

内容的提问来源于stack exchange，提问作者Glen Ottley