django載入css檔案和圖片

阿新 • • 發佈：2019-01-16

這兩天被django折磨的快崩潰了。。。要做一個網頁，結果CSS 和圖片總是載入不出來。。。。官方文件中教了一部分，上網看樂各種教程都不行，研究了好幾個小時，東拼西湊各個地方學一點，終於弄出來了，趕緊記錄下來。

django用的靜態檔案路徑：STATICFILES_DIRS部署的方式，檔案路徑一定要設定好。
注： python2.7 django1.10.6；專案mysite，專案下有一個應用myapp

一、目錄結構：
整個目錄結構是這樣的：

| mysite
| —— manage.py
| —— mysite
| —— | —— settings
| —— | ——…（urls等）
| —— templates

| —— myapp
| —— …(views等)
| —— | —— templates
| —— | —— | —— myapp
| —— | —— | —— | —— home.html
| —— | —— | —— | —— static
| —— | —— | —— | —— | —— css
| —— | —— | —— | —— | —— images

注意，資料夾結構比較複雜。
在專案資料夾下有一個templates資料夾，不過這個資料夾暫時沒什麼用，可以不用管（我也不知道為什麼要有這麼個資料夾）。
應用資料夾結構是這樣的：

“myapp/templates/myapp/home.html”；
“myapp/templates/myapp/static/images”；
“myapp/templates/myapp/static/CSS”；

二、設定templates和靜態路徑

在settings.py中設定templates路徑

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'myapp/templates' 
).replace('\\', '/'),
                 os.path.join(BASE_DIR, 'templates').replace('\\', '/')],
     }
]

在settings.py檔案的最後加上以下內容：

STATIC_ROOT = os.path.join(BASE_DIR, 'myapp/templates/myapp/static').replace('\\', '/')
STATICFILES_DIRS = (
    ('css', os.path.join(STATIC_ROOT, 'css').replace('\\', '/')),
    ('images', os.path.join(STATIC_ROOT, 'images').replace('\\', '/')),
)

三、修改urls.py檔案
在urls.py開頭加上一句：

from django.contrib.staticfiles.urls import staticfiles_urlpatterns

在urls.py的最後加上以下內容：

#設定靜態檔案路徑
urlpatterns += staticfiles_urlpatterns()

四、修改html檔案
home.html檔案相關內容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/static/css/style.css" rel="stylesheet" type="text/css" />
    <title>Home</title>
</head>
<body>
    <a href="https://www.baidu.com/>
        <img src="/static/images/logo.png" alt="logo"/>
    </a>
</body>
</html>

改成自己的圖片名稱，注意圖片和link的字首：/static/images/ 別寫成 static/images/ ，這樣會無法顯示。

感覺自己底子真的太差，這幾天一點一點看官方文件感到非常吃力，很多地方都不懂，想直接看自己需要的部分又不知道該看哪。

為了學這個我已經好幾天沒好好看書了，最近大家都在看《人民的名義》，我也好想看，可是時間不允許。

加油吧少女。

django載入css檔案和圖片

這兩天被django折磨的快崩潰了。。。要做一個網頁，結果CSS 和圖片總是載入不出來。。。。官方文件中教了一部分，上網看樂各種教程都不行，研究了好幾個小時，東拼西湊各個地方學一點，終於弄出來了，趕緊記錄下來。 django用的靜態檔案路徑：STATICFIL

gulp配置自動重新整理瀏覽器壓縮js和css檔案和圖片

1.在專案目錄下新建gulpfile.js檔案,配置如下內容 var gulp = require("gulp"); var cssnano = require("gulp-cssnano"); var rename = require("gulp-rename"); var uglify =

網頁中的動態載入(js檔案和css檔案即換膚)

導語：最近經常遇到一些人問起網頁中按需載入的需求，例如網頁load時不載入js檔案，只有當使用者觸發某個事件時才按其所需載入其所需的js檔案，又比如使用者可以隨意地切換網頁的顏色等。縱觀這些需求分析，不外乎就是js裡面的一個動態載入，因此有必要做幾個demo以供大家參考。

django 載入css等靜態檔案

網上很多都不實用，就在settings末尾加上如下程式碼就可以了。 STATICFILES_DIRS = ( # Put strings here, like "/home/html/st

django載入css、js等內容

參考了以下內容：官方文件 http://jingyan.baidu.com/article/db55b609a93b114ba30a2ffb.html 1. 新建一個目錄static，這個目錄與templates和manage.py都在同一個目錄下 2. 將css、js等

nginx啟動，重啟，重新載入配置檔案和平滑升級

Nginx有一個主程序和幾個工作程序，主程序的主要作用就是讀取，評估配置檔案和管理工作程序，工作程序對請求做實際處理。工作程序的數量在配置檔案中配置的，一般設定為cpu的核心數*執行緒數。 nginx可以通過訊號控制，預設情況下，主程序的程序ID記錄在/usr/local/nginx/

web頁面左右雙向箭頭(利用CSS樣式和圖片)——20181130

1、顯示效果：（CSS樣式） <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <script type="text/javascript" src="https

Android獲取assets目錄下的檔案和圖片

在android studio中預設不會像eclipse一樣自動新建assets檔案，首先將android studio的檢視切換到project下，src/man下直接新建檔案命名為assets即可。 1、獲取圖片 Bitmap bitmap = n

html引入css檔案和js檔案方式

webpack打包 css檔案裡面圖片路徑替換位置

{ test: /\.css$/, use: ExtractTextPlugin.extract({ use: ['css-loader?minimize', 'auto

YII中Ueditor富文字編輯器檔案和圖片上傳的配置

將Ueditor整合到YII框架中後，參照editor_config.js中的toolbars中的內容，更改options中標籤可以給編輯器新增想要的功能：因此要想新增檔案和圖片上傳功能，應該加入以下兩個標籤：文字編輯器中便出現了對應的兩個選項：但是點選上傳圖片按

java 複製檔案和圖片

一複製檔案採用 BufferedReader和 BufferedWriter 作為快取 public static void main(String[] args) throws IOException { // TODO Auto-generated method s

spring 設定通過程式碼啟動載入配置檔案和設定啟動順序

通過這種方式載入可以使用maven模組化，拋開web.xml的束縛。 @Order(1) public class SpringConfigInitializer extends AbstractContextLoaderInitializer implements

nginx啟動、重啟、重新載入配置檔案和平滑升級

Nginx有一個主程序和幾個工作程序，主程序的主要作用就是讀取、評估配置檔案和管理工作程序，工作程序對請求做實際處理。工作程序的數量是在配置檔案中配置的，一般設定為cpu的核心數*執行緒數。 nginx可以通過訊號控制，預設情況下，主程序的程序ID記錄在/usr/loca

CSS檔案和樣式命名規範，僅供參考

id一個頁面只可以使用一次，class可以多次引用。我在頁面中用了多個相同id在IE中顯示也正常，id和class好象沒什麼區別，用多個相同id有什麼影響嗎？頁面存在多個相同的ID影響就是不能通過W3的校驗。在頁面顯示上，目前的瀏覽器還都允許你犯這個錯誤，用多個相同ID“一般情況下”也能正常顯示。但是

css檔案和js檔案以及script指令碼放置位置

前言 html執行順序是自上而下的，但是在執行 script指令碼時中斷執行緒，等待該script指令碼執行結束之後程式才繼續往下執行。兩種情況將script指令碼放在body之前。因為一些

Java---網路程式設計(3)-TCP-互傳檔案和圖片

☆ TCP 建立連線，形成傳輸資料的通道。在連線中進行大資料量傳輸通過三次握手完成連線，是可靠協議必須建立連線，效率會稍低 Socket 和 ServerSocket類 TCP傳輸 TCP Socket：IP地址和埠，套接字 Sock

JSP中引入專案中的js檔案或css檔案或圖片

以引入jQuery為例：引入通常分為相對路徑和絕對路徑：相對路徑舉例：<script type="text/javascript" src="../plug-in/jquery/jquery-2.1.1.min.js"></script>其中../表示

IIS釋出，無法顯示CSS樣式和圖片

在BS的專案中，完成之後，都需要釋出自己的網站。這個時候就要安裝IIS了。我也是最近才打算使用IIS來進行釋出的。剛把IIS安裝上，就遇到了問題。出現問題就想辦法解決問題唄。遇

tornadofx拖拽顯示文字檔案和圖片檔案

class DragFile : View("drag and drop") { val dragFileModel = DragFileModel(this) lateinit var ap: FlowPane override val root = vbox {

django載入css檔案和圖片

相關推薦