2017-08-02 152 views
0

我想讓我的背景圖片顯示在django 1.11.3中使用css,並且在運行無法加載圖片的服務器時在終端中收到了一些404錯誤。我的css文件確實加載並可以更改我的home.html文件中的內容。django 1.11.3 css背景圖片不顯示

home.html的

{% extends 'layout.html' %} 
{% load static %} 
{% block content %} 

<div class="container-fluid"> 
    <div class="row img-bg"> 
    <div class="col-sm-12"> 
     <a href='#'>My Button</a> 
    </div> 
    </div> 
</div> 

CSS -

.img-bg{ 
    background: url('../img/logo.png'); // 404 error 
    background: url('../assets/img/logo.png'); // 404 error 
    background: url("{% static 'img/logo.png' %}"); // 404 error 
    background-size: 100% auto; 
    height: 100px; 
    width: 100px; 
} 

settings.py

STATIC_URL = '/static/' 
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'assets'), 
) 

文件夾結構

website_src 
    --assets 
    --css 
     --style.css 
    --img 
     --logo.png 
+0

什麼是IMG的源服務的資產所有的文件?右鍵單擊並複製圖像位置。 –

回答

0

更改以下:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'assets'), 
) 

要:

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'), 
) 

,然後python manage.py collectstatic,看看是否有所幫助。

1

改變你CSS文件,因爲你是通過/static/

.img-bg{ 
    background: url('/static/img/logo.png'); 
    background-size: 100% auto; 
    height: 100px; 
    width: 100px; 
}