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,一经查实,立即删除!

相关文章

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…

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

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

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

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

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;搜索…

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

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

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…

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

3.4.1 模型结构 SiamRPN网络结构如下图所示&#xff0c;虚线的两边都是网络结构图&#xff0c;虚线左侧是特征提取网络结构&#xff0c;右侧是RPN结构图。其实SiamRPN的网络结构与SiamRPN网络结构十分相似&#xff0c;而SiamRPN就是在SiamRPN的基础上加入许多的创新点。 SiamR…

lanmp之二 (奇葩问题)

ps&#xff1a;该篇是接 lanmp —— 动静分离 lanmp —— 奇葩问题 话说&#xff0c;在 搭建 bbs.abc.com &#xff08;discuz论坛&#xff09;的 时候。。。。 1、说明&#xff1a;web机器上以前已经有一个 discuz 旧论坛 要做数据迁移&#xff08;改域名/拷贝数据/迁移网站&a…

[已解决]user is not in the sudoers file. This incident will be reported.(简单不容易出错的方式)

linux Ubuntu中报错&#xff0c;XXX is not in the sudoers file. This incident will be reported. 今天在学习的时候&#xff0c;不小心把自己的用户sudo玩坏了&#xff08;Broken sudo&#xff09;&#xff0c;于是上谷歌搜索XXX is not in the sudoers file. This inciden…

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

与普通的视频跟踪网络不同的是&#xff0c;SiamMask可以同时完成视频跟踪和实例级分割的任务。如下图所示&#xff0c;与传统的对象跟踪器一样&#xff0c;依赖于一个简单的边界框初始化&#xff08;蓝色&#xff09;并在线操作。与ECO&#xff08;红色&#xff09;等最先进的跟…

编译器的大小端模式

大端模式&#xff08;Big_endian&#xff09;&#xff1a;字数据的高字节存储在低地址中&#xff0c;而字数据的低字节则存放 在高地址中。 小端模式&#xff08;Little_endian&#xff09;&#xff1a;字数据的高字节存储在高地址中&#xff0c;而字数据的低字节则存放 在低地…

【原】jQuery编写插件

分享一下编写设置和获取颜色的插件&#xff0c;首先我将插件的名字命名为jquery.color.js。该插件用来实现以下两个功能1.设置元素的颜色。2.获取元素的颜色。 先在搭建好如下编写插件的框架&#xff1a; ;(function($){//这里编写插件代码 })(jQuery); 我这里采用jQuery.fn.ex…

数据结构链表之单向链表:Python3 实现单向链表——1

Python3 实现单向链表 链表定义与简介 定义&#xff1a;链表与顺序表(Python中列表)性质相反&#xff0c;链表是物理单元上非顺序的、非连续的&#xff0c;在逻辑顺序上其数据元素是通过指针实现的&#xff0c;组成链表的每一个元素也可以叫做链表的节点&#xff0c;节点可以…

C语言(贪心法)

C语言有这样一个规则&#xff0c;每一个符号应该包含尽可能多的字符。也就是说&#xff0c;编译器将程序分解成符号的方法是&#xff0c;从左到右一个一个字符地读入&#xff0c;如果字条可能组成一个符号&#xff0c;那么再读入下一个字符&#xff0c;判断已经读入的两个字符组…

数据结构链表之双向链表:Python3 实现双向链表——2

Python3 实现双向链表 双向链表 定义&#xff1a;双向链表是链表中的一种&#xff0c;双向链表也叫双链表&#xff0c;它由多个节点组成&#xff0c;每个节点由一个数据域和两个指针域组成&#xff0c;一个指针指向前驱元素&#xff0c;一个指向后继元素 双向链表一般用来构…

linux驱动之ioctl

大部分驱动除了需要具备读写设备的能力之外&#xff0c;还需要具备对硬件控制的能力。 一、在用户空间&#xff0c;使用ioctl系统调用来控制设备&#xff0c;原型如下&#xff1a; int ioctl(int fd,unsigned long cmd,...); /* fd:文件描述符 cmd:控制命令 ...:可选参数:插入*…

数据结构链表之单链表的快慢指针——3

单链表之快慢指针 单链表的快慢指针简介 快慢指针指链表中定义两个指针&#xff0c;两个指针的移动速度一快一慢&#xff0c;一般快指针移动步长为慢指针的两倍 快慢指针适合解决的几个典型问题 中间值问题单向链表是否有环问题有环链表的入口问题 先定义一个简单的节点 …