如何在CSS中添加图片？Flask部署后图片加载404求助

你的问题核心在于CSS文件无法解析Flask的Jinja2模板语法——你在CSS里写的{{ url_for('static',filename = '/images/cover4.jpg')}}是无效的，浏览器会直接把这段字符串当成图片路径去请求，自然找不到资源返回404。下面给你两种简单可行的解决方案：

方案1：使用相对路径（推荐，更灵活） #

先确认你的static目录结构应该是这样的：

static/
├── css/
│   └── firstone.css
└── images/
    └── cover4.jpg

如果是这个结构，直接在CSS里用相对路径指向图片：

.cover-image {
    background-image: url('../images/cover4.jpg');
    background-size: 100% 100%;
    width: 100%;
    height: 110vh;
}

解释：../表示从当前css文件夹往上跳一级（回到static目录），再进入images文件夹找到目标图片。

方案2：使用绝对路径 #

因为你的Flask app已经设置了static_url_path='/static'，可以直接用绝对路径写死：

.cover-image {
    background-image: url('/static/images/cover4.jpg');
    background-size: 100% 100%;
    width: 100%;
    height: 110vh;
}

这个路径会让浏览器直接请求http://localhost:5000/static/images/cover4.jpg，Flask会正确从静态目录返回图片资源。

额外检查点 #

• 确认图片文件名和路径完全正确（注意大小写，比如Cover4.jpg和cover4.jpg在Linux/macOS系统下是不同的）
• 确认图片确实放在static/images/目录下，没有放错位置

内容的提问来源于stack exchange，提问作者Dinesh Kumar