如何在CSS文件中添加图像?我正在使用python烧瓶进行网站开发



在Python Flask之前一切都运行良好。现在我尝试将我的HTML页面与Python Flask连接起来。CSS工作正常,但是当我在CSS文件中定义图像时,图像不再加载到网站中。相反,它显示错误 404。

蟒蛇 app.py 代码

from flask import Flask, render_template, url_for
app = Flask(__name__ , static_url_path='/static')
@app.route('/')
def index():
return render_template('/intro.html')
if __name__ == '__main__':
app.run(debug=True)

网页代码 :-

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>NewliFit</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="{{ url_for('static',filename='css/owl.carousel.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename = 'css/owl.theme.default.css') }}">
<link rel="stylesheet" href="{{ url_for('static',filename='css/firstone.css') }}">
</head>
<body>
<div class="main">
<div class="cover-image">
<div class="menu">
<div class="leftmenu">

CSS 文件

@charset "utf-8";
/* CSS Document */
*{
margin: 0px ;
padding: 0px ;
}
/* ------------cover image -------------*/
.cover-image {
background-image: url({{ url_for('static',filename = '/images/cover4.jpg')}});
background-size: 100% 100%;
width: 100%;
height: 110vh;
}

请帮忙。

您在CSS文件中使用url_for,这不起作用。您需要在 HTML 文件中指定背景图像的 URL,或者在 CSS 中指定正确的 URL。

因此,请将其添加到您的CSS中:

background-image: url('/static/images/cover4.jpg')}});

或者将 HTML 文件中的封面图像div 更改为:

<div class="cover-image" style="background-image: url({{ url_for('static',filename = '/images/cover4.jpg')}});">

除非您打算定期更改静态文件夹(或封面图像(,否则我建议您走第一条路线,以确保您将样式和语义分开。

最新更新