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数据库。通过刘金玉编程的教程,你会发现数据库的使用也是如此简单!加油哦!

相关文章
|
4天前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
23 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
4天前
|
人工智能 测试技术 数据处理
通义灵码 2.0 体验报告:Deepseek 加持下的 Python 开发之旅
通义灵码 2.0 体验报告:Deepseek 加持下的 Python 开发之旅
57 11
|
8天前
|
API Python
python泛微e9接口开发
通过POST请求向指定IP的API注册设备以获取`secrit`和`spk`。请求需包含`appid`、`loginid`、`pwd`等头信息。响应中包含状态码、消息及`secrit`(注意拼写)、`secret`和`spk`字段。示例代码使用`curl`命令发送请求,成功后返回相关信息。
30 5
|
1月前
|
存储 SQL 数据采集
Django框架的表单验证和过滤机制的原理是什么?
Django框架的表单验证和过滤机制的原理是什么?
108 73
|
1月前
|
人工智能 Python
【02】做一个精美的打飞机小游戏,python开发小游戏-鹰击长空—优雅草央千澈-持续更新-分享源代码和游戏包供游玩-记录完整开发过程-用做好的素材来完善鹰击长空1.0.1版本
【02】做一个精美的打飞机小游戏,python开发小游戏-鹰击长空—优雅草央千澈-持续更新-分享源代码和游戏包供游玩-记录完整开发过程-用做好的素材来完善鹰击长空1.0.1版本
56 7
|
1月前
|
程序员 Linux Python
python中模板和包的使用
本文介绍了 Python 模块和包的基本概念及使用方法。模块是 Python 程序结构的核心,每个以 `.py` 结尾的源文件都是一个模块,包含可重用的代码。文章详细讲解了模块的导入方式(如 `import` 和 `from...import`),模块的搜索顺序,以及如何创建和发布自己的模块。此外,还介绍了包的概念,包是包含多个模块的特殊目录,并通过 `__init__.py` 文件定义对外提供的模块列表。最后,文章简述了如何使用 `pip` 工具管理第三方模块的安装与卸载。作者:大石头的笔记;来源:稀土掘金。
|
1月前
|
前端开发 搜索推荐 编译器
【01】python开发之实例开发讲解-如何获取影视网站中经过保护后的视频-用python如何下载无法下载的视频资源含m3u8-python插件之dlp-举例几种-详解优雅草央千澈
【01】python开发之实例开发讲解-如何获取影视网站中经过保护后的视频-用python如何下载无法下载的视频资源含m3u8-python插件之dlp-举例几种-详解优雅草央千澈
111 34
【01】python开发之实例开发讲解-如何获取影视网站中经过保护后的视频-用python如何下载无法下载的视频资源含m3u8-python插件之dlp-举例几种-详解优雅草央千澈
|
1月前
|
人工智能 编译器 Python
python已经安装有其他用途如何用hbuilerx配置环境-附带实例demo-python开发入门之hbuilderx编译器如何配置python环境—hbuilderx配置python环境优雅草央千澈
python已经安装有其他用途如何用hbuilerx配置环境-附带实例demo-python开发入门之hbuilderx编译器如何配置python环境—hbuilderx配置python环境优雅草央千澈
41 0
python已经安装有其他用途如何用hbuilerx配置环境-附带实例demo-python开发入门之hbuilderx编译器如何配置python环境—hbuilderx配置python环境优雅草央千澈
|
2月前
|
IDE 测试技术 开发工具
10个必备Python调试技巧:从pdb到单元测试的开发效率提升指南
在Python开发中,调试是提升效率的关键技能。本文总结了10个实用的调试方法,涵盖内置调试器pdb、breakpoint()函数、断言机制、logging模块、列表推导式优化、IPython调试、警告机制、IDE调试工具、inspect模块和单元测试框架的应用。通过这些技巧,开发者可以更高效地定位和解决问题,提高代码质量。
333 8
10个必备Python调试技巧:从pdb到单元测试的开发效率提升指南
|
2月前
|
Python
Seaborn 教程-模板(Context)
Seaborn 教程-模板(Context)
57 4

热门文章

最新文章

推荐镜像

更多