Django框架开发005期 Python调用template模板网页开发调用静态资源

简介: Django框架开发005期 Python调用template模板网页开发调用静态资源

3.2开发调用静态资源文件

我们在开发漂亮的网页的时候往往会用到很多图片、字体、视频、音频等,那么这些资源文件都存放到Django项目的哪个位置呢?本节就来使用Django框架来实现调用一张图片,并使得它用img标签显示出来。我们把图片当做静态资源的一种文件类型,只要它能实现调用,其它的文件也可以被调用成功。

我们先来看看Django框架中的html网页默认调用图片后会发生什么?在这里,我们就来上文中创建的ljyIndex.html模板文件中的body元素中追加一个img标签,标签指向图片文件夹中的某个图片文件。那么我们先需要创建一个图片文件夹,这个图片文件夹最好是在某个大的资源文件夹中的,就像模板文件一样。那么,我们就为项目创建一个静态资源文件夹吧,我们把它命名为ljyStaticRes,创造完文件夹后,我们创建图片文件夹img、样式文件夹css、脚本文件夹js、其它文件的文件夹others,那么就构造出了一个标准的前端开发网站文件结构。最后再到Django框架配置文件配置好静态资源文件夹所在项目中的路径即可在浏览器中预览图片。详细步骤见下图。

第1步:创建静态资源文件夹。

在项目文件夹上右键菜单中新建文件夹。

对静态资源文件夹命名为ljyStaticRes。

接着在ljyStaticRes文件夹中将其它几个文件夹创建好,建立完成后,网站项目结构如下图所示。

第2步:复制图片到img文件夹。

我们接着复制一张图片到img文件夹中,本案例的图片为pic1.jpg。

复制完成后,静态资源文件夹的文件架构如下。

第3步:在html中调用图片文件。

打开ljyIndex.html文件,在body标签中追加img标签如下图所示。

我们启动项目后,预览一下效果如何?

通过以上截图效果,我们发现了找不到图片的问题,其实就是还没有在Django中配置好静态资源路径。

第4步:Django框架静态资源配置。

打开settings.py文件,到该文件的下方找到STATIC_URL变量,大概121行,在这个变量下方书写静态资源文件配置的变量STATICFILES_DIRS,并为其赋值[str(BASE_DIR)+"\\ljyStaticRes"],如下图所示。

配置好后,重启服务器,我们再来看看图片是否可以被浏览出来?

我们发现项目输出日志中仍然提示找不到图片。

其实此时是因为配置文件中对于静态资源文件夹有它自己的别名,这个别名就是STATIC_URL这个变量的值‘/static/’,所以这个别名就是调用图片时候的静态资源文件夹的名称。我们按照这个别名到浏览器中改一下,然后就可以看到图片了。

然后我们再修改模板文件上面的img标签调用的图片路径,把它的名称改为别名。

预览这个页面效果如下。

到这里,我们就成功解决了网站展示图片的问题了。其实这个方式的实用性非常强,除了图片以后,我们的css文件、js文件、资源链接等通过静态资源配置的方式都可以被调用了!所以,马上去实践一下吧!Django框架开发网站,我们最终还要解决让网站数据“活”起来的问题。因此,我们一定要学好让网站变活的数据库知识。小伙伴们,可以通过观看《刘金玉的零基础数据库教程》可以学会更多的数据库操作开发的知识哦!
下期开始,老刘就在此开始为大家介绍Django自带支持的sqlite数据库。通过刘金玉编程的教程,你会发现数据库的使用也是如此简单!加油哦!

相关文章
|
5月前
|
Java 数据处理 索引
(Pandas)Python做数据处理必选框架之一!(二):附带案例分析;刨析DataFrame结构和其属性;学会访问具体元素;判断元素是否存在;元素求和、求标准值、方差、去重、删除、排序...
DataFrame结构 每一列都属于Series类型,不同列之间数据类型可以不一样,但同一列的值类型必须一致。 DataFrame拥有一个总的 idx记录列,该列记录了每一行的索引 在DataFrame中,若列之间的元素个数不匹配,且使用Series填充时,在DataFrame里空值会显示为NaN;当列之间元素个数不匹配,并且不使用Series填充,会报错。在指定了index 属性显示情况下,会按照index的位置进行排序,默认是 [0,1,2,3,...] 从0索引开始正序排序行。
414 0
|
5月前
|
存储 Java 数据处理
(numpy)Python做数据处理必备框架!(一):认识numpy;从概念层面开始学习ndarray数组:形状、数组转置、数值范围、矩阵...
Numpy是什么? numpy是Python中科学计算的基础包。 它是一个Python库,提供多维数组对象、各种派生对象(例如掩码数组和矩阵)以及用于对数组进行快速操作的各种方法,包括数学、逻辑、形状操作、排序、选择、I/0 、离散傅里叶变换、基本线性代数、基本统计运算、随机模拟等等。 Numpy能做什么? numpy的部分功能如下: ndarray,一个具有矢量算术运算和复杂广播能力的快速且节省空间的多维数组 用于对整组数据进行快速运算的标准数学函数(无需编写循环)。 用于读写磁盘数据的工具以及用于操作内存映射文件的工具。 线性代数、随机数生成以及傅里叶变换功能。 用于集成由C、C++
486 1
|
5月前
|
Java 数据挖掘 数据处理
(Pandas)Python做数据处理必选框架之一!(一):介绍Pandas中的两个数据结构;刨析Series:如何访问数据;数据去重、取众数、总和、标准差、方差、平均值等;判断缺失值、获取索引...
Pandas 是一个开源的数据分析和数据处理库,它是基于 Python 编程语言的。 Pandas 提供了易于使用的数据结构和数据分析工具,特别适用于处理结构化数据,如表格型数据(类似于Excel表格)。 Pandas 是数据科学和分析领域中常用的工具之一,它使得用户能够轻松地从各种数据源中导入数据,并对数据进行高效的操作和分析。 Pandas 主要引入了两种新的数据结构:Series 和 DataFrame。
597 0
|
5月前
|
Java 数据处理 索引
(numpy)Python做数据处理必备框架!(二):ndarray切片的使用与运算;常见的ndarray函数:平方根、正余弦、自然对数、指数、幂等运算;统计函数:方差、均值、极差;比较函数...
ndarray切片 索引从0开始 索引/切片类型 描述/用法 基本索引 通过整数索引直接访问元素。 行/列切片 使用冒号:切片语法选择行或列的子集 连续切片 从起始索引到结束索引按步长切片 使用slice函数 通过slice(start,stop,strp)定义切片规则 布尔索引 通过布尔条件筛选满足条件的元素。支持逻辑运算符 &、|。
297 0
|
7月前
|
存储 监控 算法
淘宝买家秀 API开发实录Python(2025)
本文讲述了作者在电商开发领域,尤其是对接淘宝买家秀 API 接口过程中所经历的挑战与收获。从申请接入、签名验证、频率限制到数据处理和实时监控,作者分享了多个实战经验与代码示例,帮助开发者更高效地获取和处理买家秀数据,提升开发效率。
|
6月前
|
设计模式 人工智能 API
AI智能体开发实战:17种核心架构模式详解与Python代码实现
本文系统解析17种智能体架构设计模式,涵盖多智能体协作、思维树、反思优化与工具调用等核心范式,结合LangChain与LangGraph实现代码工作流,并通过真实案例验证效果,助力构建高效AI系统。
753 7
|
6月前
|
机器学习/深度学习 算法 PyTorch
【Pytorch框架搭建神经网络】基于DQN算法、优先级采样的DQN算法、DQN + 人工势场的避障控制研究(Python代码实现)
【Pytorch框架搭建神经网络】基于DQN算法、优先级采样的DQN算法、DQN + 人工势场的避障控制研究(Python代码实现)
163 1
|
6月前
|
机器学习/深度学习 算法 PyTorch
【DQN实现避障控制】使用Pytorch框架搭建神经网络,基于DQN算法、优先级采样的DQN算法、DQN + 人工势场实现避障控制研究(Matlab、Python实现)
【DQN实现避障控制】使用Pytorch框架搭建神经网络,基于DQN算法、优先级采样的DQN算法、DQN + 人工势场实现避障控制研究(Matlab、Python实现)
253 0
|
7月前
|
算法 程序员 API
电商程序猿开发实录:淘宝商品python(2)
本文分享了开发者在对接淘宝商品详情API过程中的真实经历,涵盖权限申请、签名验证、限流控制、数据解析及消息订阅等关键环节,提供了实用的Python代码示例,帮助开发者高效调用API,提升系统稳定性与数据处理能力。
|
7月前
|
API 数据安全/隐私保护 Python
拼多多批量上架软件, 电商一键上货发布工具,python电商框架分享
多线程批量上传架构,支持并发处理商品数据 完整的拼多多API签名和token管理机制

推荐镜像

更多