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

Django 模板实现(动态)图片作头像展示到页面

在网上搜了加载图片到前端的解决方法,大多都比较复杂,要引用PIL,下载Cropper插件(可以用于裁图)之类的,下面是一个简单易懂的方法实现(动态)图片上传到页面:

注意:前提你已经编辑好上传图片的功能页面(templates),下面是怎么实现上传到指定页面的方法,不包含裁图功能
0、首先默认你已经在settings.py中设置好静态文件路径:

STATIC_URL = '/static/'
# 配置静态文件路径
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')
]
# 上传文件路径,注意windows下路径是\,而linux是/,还要加上转义字符r
MEDIA_ROOT = os.path.join(BASE_DIR, r'static\media')

1、编写对应的views.py,传入img变量到相应的模板:

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

这里的图像img是你放在media(第0步配置了路径)下的图片名称:
在这里插入图片描述
2、进入urls.py配置视图中testpage函数对应的路由:

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)

导入的static 用作引用静态文件,settings就是settings.py文件,关键点在于urlpatterns +=...作用是将你要渲染的页面和media下的图像文件关联
3、在模板html文件中引用views中传递过来的img:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试页面</title>
</head>
<body><img src="{{img}}"/>
</body>
</html>

此时如果你的书写没有问题你应该可以在页面看到你要引用的图像,可以是jpg、png也可以是动图gif

如果没出现你要的图片请检查你的模板html文件位置是否正确,他应该在你建立的app目录下,创建app的时候会自动配置相应的文件,请不要随便建一个目录来当做项目的app目录

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/469613.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSDN编程挑战(交换字符)

如果字符串str3能够由str1和str2中的字符按顺序交替形成&#xff0c;那么称str3为str1和str2的交替字符串。例如str1"abc"&#xff0c;str2"def"&#xff0c;那么"adbecf", "abcdef", "abdecf", "abcdef", "…

Unknown encoder ‘libx264‘的解决方法

1、问题描述&#xff1a; 运行程序的时候出现了这个错误,Unknown encoder ‘libx264’,和ffmpeg库有关. MoviePy error: FFMPEG encountered the following error while writing file run1output_video.mp4: b”Unrecognized option ‘preset’.\nError splitting the argumen…

Django之验证码的实现,简单快捷的方法

Django之验证码的实现&#xff0c;简单快捷的方法 实现验证码随网页变动即时刷新&#xff0c;实现有期限时间 请确保安装好pillow 直接show code&#xff1a; 0、路由urs.py from django.urls import path, re_path from . import views urlpatterns [re_path(r^test/$, vie…

5 Django系列之通过list_display展示多对多与外键内容在admin-web界面下

list_display展示多对多关系的内容 表结构关系 表一 class Server(models.Model):asset models.OneToOneField(Asset)created_by_choices ((auto,Auto),(manual,Manual),)created_by models.CharField(choicescreated_by_choices,max_length32,defaultauto) #auto: auto cre…

智慧交通day04-特定目标车辆追踪01:总览概述

项目介绍&#xff1a; 运动目标跟踪一直以来都是一项具有挑战性的工作, 也是研究的热点方向. 现阶段, 随着硬件设施 的不断完善和人工智能技术的快速发展, 运动目标跟踪技术越来越重要. 目标跟踪在现实生活中有很 多应用, 包括交通视频监控、运动员比赛分析、智能人机交互 、跟…

Python3之字典生成器结合lambda实现按key/value排序

Python3之字典生成器结合lambda实现按key/value排序 1、先介绍不常见的字典按value排序&#xff1a; dict1 {"g": 2, "f": 1, "a": 6} print(dict1.values()) d1 sorted(dict1.items(), keylambda d: d[1], reverseTrue) # 按字典values倒…

XCode8 App上传AppStore更新

1.在这个网站中https://itunesconnect.apple.com 点击“我的APP” 选取需要更新的app 2.点击加号 版本或平台&#xff0c;填写对应的更新版本 3.配置Xcode项目 1 》注意 上图的 套装ID 就是项目中的 Bundle Identity 必须要一模一样 并且不能修改 》配置相同的Bundle Identity…

智慧交通day04-特定目标车辆追踪02:Siamese网络+单样本学习

1.Siamese网络 Siamese network就是“连体的神经网络”&#xff0c;神经网络的“连体”是通过共享权值来实现的&#xff0c;如下图所示。共享权值意味着两边的网络权重矩阵一模一样&#xff0c;甚至可以是同一个网络。 如果左右两边不共享权值&#xff0c;而是两个不同的神经网…

学习网站(不断更新)

一个师兄给我的在线可编译的网站: http://www.fenby.com/user/me Linux最新内核代码: http://www.kernel.org/如果是拿来学习研究的 Linux早期版本内核代码(简单易学): http://www.oldlinux.org/index_cn.html LDD3例子这个家伙写得非常不错 http://blog.csdn.net/liuhaoy…

CSS如何实现两个a标签元素的文字一个靠左一个靠右,并且能点击分别不同的链接

CSS如何实现两个a标签元素的文字一个靠左一个靠右&#xff0c;并且能点击分别不同的链接 作为一个非专业前端&#xff0c;有时候开发又必须自己写一些简单的前端&#xff0c;在网上有时候不能及时查找到内容&#xff0c;只能自己尝试&#xff0c;如下是实现两个span中的a标签下…

智慧交通day04-特定目标车辆追踪03:siamese在目标跟踪中的应用-SiamFC(2016)

目标追踪任务是指在一个视频中给出第一帧图像的bbox的位置&#xff0c;在后续的帧中追踪该物体的任务。 目标追踪不同于目标检测的是&#xff1a; 1、需要给出首帧的标定框。 2、只需要给出标定框&#xff0c;后续的搜索范围往往在上一帧图像的附近。 孪生网络是使用深度学习…

word-break|overflow-wrap|word-wrap——CSS英文断句浅析

---恢复内容开始--- word-break|overflow-wrap|word-wrap——CSS英文断句浅析 一 问题引入 今天在再次学习 overflow 属性的时候&#xff0c;查看效果时&#xff0c;看到如下结果&#xff0c;内容在 div 中国换行了&#xff0c;可是两个 P 元素的内容并没有换行&#xff0c;搜索…

linux内核定时器编程

1.linux内核定时器基本结构和函数 1&#xff09;struct timer_list 一个struct timer_list对应了一个定时器。 #include <linux/timer.h> 以下列出常用的接口&#xff1a; struct timer_list{/*....*/unsigned long expires;//定时器服务函数开始执行时间void (*func…

django ModuleNotFoundError: No module named 'tinymce***'

django ModuleNotFoundError: No module named ‘***’ 1、检查对应的模块是否有安装&#xff0c;可以使用pip list查看 没有安装请执行安装 python -m pip install *** (--user)&#xff0c;某些电脑user没有权限需要加上括号中的 2、如果有安装 请检查python的django配置安…

度量时间差和jiffies计数器

HZ 1、内核通过定时器中断来跟踪时间流 2、时钟中断由系统定时硬件以周期性的间隔产生&#xff0c;这个间隔由内核根据HZ的值设定&#xff0c;HZ是一个与体系结构有关的常数&#xff0c;定义在<linux/param.h>或者该 文件包含的某个子平台相关的文件中。 jiffies 1、…

智慧交通day04-特定目标车辆追踪03:siamese在目标跟踪中的应用-SiamRPN(2017)

3.2 SiamRPN(2017) 3.2.1 网络结构 Siam-RPN提出了一种基于RPN的孪生网络结构&#xff0c;由孪生子网络和RPN网络组成&#xff0c;前者用来提取特征&#xff0c;后者用来产生候选区域。其中&#xff0c;RPN子网络由两个分支组成&#xff0c;一个是用来区分目标和背景的分类分…

点绛唇-王禹偁

diǎn jinɡ chn ɡǎn xnɡ 点 绛 唇 感 兴 wnɡ yǔ chēnɡ 王 禹 偁 yǔ hn yn chu &#xff0c; jiānɡ nn yī ji chēnɡ jiā l 。 雨 恨 云 愁 &#xff0c; 江 南 依 旧 称 佳 丽 。 shuǐ cūn y sh &#xff0c; y lǚ ɡū yān x…

ubuntu 18 Cannot find installed version of python-django or python3-django.

ubuntu系统下安装了django&#xff0c;但是启动django项目时报错 Cannot find installed version of python-django or python3-django. 原因&#xff1a; ubuntu大于14版本的应该安装python3-django 解决办法&#xff1a; apt-get install python3-django 如果提示你有几个…

智慧交通day04-特定目标车辆追踪03:siamese在目标跟踪中的应用-DaSiamRPN(2018)

DaSiamRPN网络的全称为Distractor-aware SiamRPN&#xff0c;是基于SiamRPN网络结构&#xff0c;提出更好的使用数据&#xff0c;针对跟踪过程的干扰物&#xff0c;利用更好的训练方式是跟踪更加的鲁棒。 DaSiamRPN认识到了现有的目标追踪数据集中存在的不平衡问题&#xff0c…

SyntaxError: Non-ASCII character '\xe9' in file...ubuntu系统下python运行时提示编码格式不正确以及提示No module named xxx

在Ubuntu 18下创建django项目&#xff0c;运行python文件时报错&#xff1a; SyntaxError: Non-ASCII character \xe9 in file /home/image/桌面/django_test/test_proj/ test_proj/settings.py on line 127, but no encoding deared; see http://python.org/dev/ peps/pep-02…