无法正确提供烧瓶中的静态文件

Question

I am trying to serve a static image to a css file using flask. I am using render_template() to to get the html file, and I have a static directory for my css and javascript. My other image is loading, but the image that I am referencing from the css file is not working and I get his from the flask terminal: GET /static/static/res/typewriter.jpg HTTP/1.1" 404

I tried typing in the path in my browser and it works fine

This is how I am referencing the image since the CSS file is already in the static directory. background-image: url("/res/typewriter.jpg");

I hope there is an easy fix for this, especially since I am new to this stuff. Thanks!

Answer 1

In your html file you should have this in the header:

<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='mainpage.css') }}"> 

... as long as your static directory is named static. In several of my Flask applications I am importing Bootstrap css like so:

  <link rel=stylesheet type=text/css href="{{ url_for('static', filename='bootstrap.css') }}">

Ensure you are visiting http://127.0.0.1:5000 in your browser (unless you changed the default).

Also here is a random example of how I serve images from the static directory:

h1 class="display-3"> <img src="/static/title_welcome.png" alt="about"></h1>