static files

CSS, images and js in the project are all static files
Generally, static files are placed in a separate directory for easy management
When calling in the html page, you also need to specify the path of the static file. Django provides a way to parse the static file path.
Static files can be placed in the project root directory or in the application directory. Since some static files are common in the project, it is recommended to place them in the project root directory for easy management.

Example

Define the static file search path in the test5/settings.py file

STATIC_URL = '/static/' # 设置访问静态文件访问的url地址 
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'), #设置静态文件存放的物理目录
]

Create the static directory in the project root directory, and then create the img, css, and js directories. The structure is as follows

Define the view jingtai in booktest/views.py

def jingtai(request):
    return render(request,'booktest/jingtai.html')

Configure urls in booktest/urls.py

    url(r'^jingtai/$',views.jingtai),

Create jingtai.html file under templates/booktest/

<html>
<head>
    <title>静态文件</title>
</head>
<body>
<img src="/static/img/sg.png"/>
</body>
</html>

Save the image to the static/img/ directory, the name is sg.png, and the directory structure is as follows

Run the server, the browsing effect is as follows

Configure static files

Django provides a configuration that can hide the real path in the html page
Modify the STATIC_URL item in the test5/settings.py file

# STATIC_URL = '/static/'
STATIC_URL = '/abc/'

Refresh the browser, the picture cannot be found

Modify templates/booktest/jingtai.html as follows

<html>
<head>
    <title>静态文件</title>
</head>
<body>
修改前：<img src="/static/img/sg.png"/>
<hr>
修改后：<img src="/abc/img/sg.png"/>
</body>
</html>

Refresh the browser, the graph appears

View the source code of the webpage and find that there is no relationship between the URL and the real address

In order to be safe, you can hide the real image path through the configuration item, and write it as a fixed path in the template. It is too troublesome to maintain later. You can use the static tag to generate the static file path according to the configuration item.
Modify templates/booktest/jingtai.html as follows

<html>
<head>
    <title>静态文件</title>
</head>
<body>
修改前：<img src="/static/img/sg.png"/>
<hr>
修改后：<img src="/abc/img/sg.png"/>
<hr>
动态配置：
{%load static from staticfiles%}
<img src="{%static "img/sg.png" %}"/>
</body>
</html>

Refresh the browser, the picture shows

View the source code of the webpage as shown below

Note: This scheme can hide the real static file path, but when deployed with Nginx, all static files will be handed over to Nginx for processing without going to the Django part, so this configuration is invalid, this function is somewhat tasteless

Django static files

static files

Example

Configure static files

Guess you like