Django之--模板加載圖片

在使用Django加載圖片時遇到了一些問題，在模板html文件中無論使用絕對路徑還是當前相對路徑都無法找到圖片，一直報403和404的錯誤，后來結合官網和網上的其他資料總算是成功了，這里記下來。

參考網址：

https://docs.djangoproject.com/en/2.0/howto/static-files/

Django將圖片，JS，CSS等文件稱作靜態文件，如果你要在模板中引用這些靜態文件，你必須設置static_url或者static_root。

1.修改settings.py文件，添加如下內容:

# Static files (CSS, JavaScript, Images)
STATIC_URL = '/static/'
STATICFILES_DIRS = [
     os.path.join(BASE_DIR, "static")
]

STATIC_URL的意思是將靜態文件的http可訪問路徑設為/static/，而STATICFILES_DIRS則是真正存儲靜態文件的目錄，你可以通過STATICFILES_DIRS添加多個靜態文件存儲目錄。

2.修改模板中對於圖片的引用路徑：

{% load static %}
<img src="{% static "1.png" %}" alt="Leo頭像" height=100 width=100 />

Django在查找圖片時會默認的使用static()方法（前提是你INSTALLED_APPS里包含django.contrib.staticfiles）到你給定的STATICFILES_DIRS目錄下尋找靜態文件，這種load寫法是官網寫法，比較推薦。

我們還可以在static下建每個app的靜態文件存放路徑，http訪問時只要加上app名就好了，例如<img src="{% static "app_name/1.png" %}" alt="Leo頭像" height=100 width=100 />

3.創建相應的目錄，並將圖片放置到此路徑下：

mkdir -p /root/Django/mysite/static   --/root/Django/mysite/是我的project根目錄（BASE_DIR）

這樣就可以實現調用了，示例結果如下：

而且此時我們還可以通過以下URL直接訪問此圖片：（這就是STATIC_URL的功能，但要保證此路徑下圖片真實存在）

http://192.168.1.193:8000/static/1.png --8000是我的對外端口

關於STATIC_ROOT:

以上的static_url參數使用的是基於BASE_DIR的相對路徑，但很多時候我們引用的靜態文件並不一定能被允許放在BASE_DIR目錄下，可能是有一個統一的存放路徑存放的，因此django的static()方法也提供了另一種訪問方式，即STATIC_ROOT參數（static()的第二個輸入參數）：

你需要在settings.py中在STATIC_URL下面添加上此參數，其值是靜態文件存放的絕對路徑。

使用此參數時建議執行下python manage.py collectstatic，作用是將你STATIC_URL和STATICFILES_DIRS下的所有app靜態文件全部拷貝至STATIC_ROOT目錄下，這樣就方便其他服務統一引用了。

STATIC_ROOT和STATIC_URL雖然都可以讓你的app訪問靜態文件，但他們的根本區別在於STATIC_ROOT和STATICFILES_DIRS一樣都是存真實文件的，而STATIC_URL只是一個url，告訴你怎么訪問這些文件，如果你不設置STATIC_ROOT和STATICFILES_DIRS，那么只有你使用第三方的web服務器時指定靜態文件路徑，靜態文件才能被訪問，例如uwsgi。

此外如果將默認的DEBUG=True參數改為False，那么STAIC_URL下的文件也將不可通過http直接訪問了，除非你將路徑直接加入urls.py。

關於MEDIA_URL和MEDIA_ROOT：

上邊解釋的STATIC相關參數適用於靜態的文件，對於用戶上傳的可修改的媒體文件例如頭像圖片等，放在STATIC_URL中就不合適了，MEDIA_URL和MEDIA_ROOT這倆參數就是用於處理媒體文件存儲的。

MEDIA_URL和MEDIA_ROOT的差別基本等同於STATIC_URL和STATIC_ROOT的差別。

目前發現有一點不一樣的：即便設置了MEDIA_URL也不能直接通過http訪問到媒體文件，還是需要將路徑加入urls.py，這點需要注意。

更多的關於在正式開發中處理靜態文件和媒體文件的信息，參考官方文檔：

https://docs.djangoproject.com/en/2.1/howto/static-files/

https://docs.djangoproject.com/en/2.1/howto/static-files/deployment/