當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Django 模板实现（动态）图片/头像展示到页面

發(fā)布時(shí)間：2024/7/5 编程问答 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 Django 模板实现（动态）图片/头像展示到页面小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Django 模板實(shí)現(xiàn)（動(dòng)態(tài)）圖片作頭像展示到頁(yè)面

在網(wǎng)上搜了加載圖片到前端的解決方法，大多都比較復(fù)雜，要引用PIL，下載Cropper插件（可以用于裁圖）之類的，下面是一個(gè)簡(jiǎn)單易懂的方法實(shí)現(xiàn)（動(dòng)態(tài)）圖片上傳到頁(yè)面：

注意：前提你已經(jīng)編輯好上傳圖片的功能頁(yè)面（templates），下面是怎么實(shí)現(xiàn)上傳到指定頁(yè)面的方法，不包含裁圖功能
0、首先默認(rèn)你已經(jīng)在settings.py中設(shè)置好靜態(tài)文件路徑：

STATIC_URL = '/static/' # 配置靜態(tài)文件路徑 STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static') ] # 上傳文件路徑，注意windows下路徑是\，而linux是/，還要加上轉(zhuǎn)義字符r MEDIA_ROOT = os.path.join(BASE_DIR, r'static\media')

1、編寫對(duì)應(yīng)的views.py，傳入img變量到相應(yīng)的模板：

def testpage(request):img = '111111myprofile.png'return render(request, 'test/profile.html', {"img": img})

這里的圖像img是你放在media（第0步配置了路徑）下的圖片名稱：

2、進(jìn)入urls.py配置視圖中testpage函數(shù)對(duì)應(yīng)的路由：

from django.conf.urls.static import static from django.conf import settings from django.urls import path, re_path urlpatterns = [re_path(r'^test/$', views.testpage, name='test'), ] urlpatterns += static('/test/', document_root=settings.MEDIA_ROOT)

導(dǎo)入的static 用作引用靜態(tài)文件，settings就是settings.py文件，關(guān)鍵點(diǎn)在于：urlpatterns +=...作用是將你要渲染的頁(yè)面和media下的圖像文件關(guān)聯(lián)
3、在模板html文件中引用views中傳遞過(guò)來(lái)的img：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>測(cè)試頁(yè)面</title> </head> <body><img src="{{img}}"/> </body> </html>

此時(shí)如果你的書寫沒有問(wèn)題你應(yīng)該可以在頁(yè)面看到你要引用的圖像，可以是jpg、png也可以是動(dòng)圖gif

如果沒出現(xiàn)你要的圖片請(qǐng)檢查你的模板html文件位置是否正確，他應(yīng)該在你建立的app目錄下，創(chuàng)建app的時(shí)候會(huì)自動(dòng)配置相應(yīng)的文件，請(qǐng)不要隨便建一個(gè)目錄來(lái)當(dāng)做項(xiàng)目的app目錄

總結(jié)

以上是生活随笔為你收集整理的Django 模板实现（动态）图片/头像展示到页面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：【Pytorch神经网络理论篇】 33
下一篇： java1.8安装