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

相关文章
|
13天前
|
机器学习/深度学习 人工智能 算法
植物病害识别系统Python+卷积神经网络算法+图像识别+人工智能项目+深度学习项目+计算机课设项目+Django网页界面
植物病害识别系统。本系统使用Python作为主要编程语言,通过收集水稻常见的四种叶片病害图片('细菌性叶枯病', '稻瘟病', '褐斑病', '稻瘟条纹病毒病')作为后面模型训练用到的数据集。然后使用TensorFlow搭建卷积神经网络算法模型,并进行多轮迭代训练,最后得到一个识别精度较高的算法模型,然后将其保存为h5格式的本地模型文件。再使用Django搭建Web网页平台操作界面,实现用户上传一张测试图片识别其名称。
65 21
植物病害识别系统Python+卷积神经网络算法+图像识别+人工智能项目+深度学习项目+计算机课设项目+Django网页界面
|
13天前
|
机器学习/深度学习 算法 TensorFlow
交通标志识别系统Python+卷积神经网络算法+深度学习人工智能+TensorFlow模型训练+计算机课设项目+Django网页界面
交通标志识别系统。本系统使用Python作为主要编程语言,在交通标志图像识别功能实现中,基于TensorFlow搭建卷积神经网络算法模型,通过对收集到的58种常见的交通标志图像作为数据集,进行迭代训练最后得到一个识别精度较高的模型文件,然后保存为本地的h5格式文件。再使用Django开发Web网页端操作界面,实现用户上传一张交通标志图片,识别其名称。
43 6
交通标志识别系统Python+卷积神经网络算法+深度学习人工智能+TensorFlow模型训练+计算机课设项目+Django网页界面
|
9天前
|
机器学习/深度学习 人工智能 算法
【新闻文本分类识别系统】Python+卷积神经网络算法+人工智能+深度学习+计算机毕设项目+Django网页界面平台
文本分类识别系统。本系统使用Python作为主要开发语言,首先收集了10种中文文本数据集("体育类", "财经类", "房产类", "家居类", "教育类", "科技类", "时尚类", "时政类", "游戏类", "娱乐类"),然后基于TensorFlow搭建CNN卷积神经网络算法模型。通过对数据集进行多轮迭代训练,最后得到一个识别精度较高的模型,并保存为本地的h5格式。然后使用Django开发Web网页端操作界面,实现用户上传一段文本识别其所属的类别。
22 1
【新闻文本分类识别系统】Python+卷积神经网络算法+人工智能+深度学习+计算机毕设项目+Django网页界面平台
|
5天前
|
Linux Android开发 iOS开发
开源的Python库,用于开发多点触控应用程序
Kivy是一款开源Python库,专为开发多点触控应用设计,支持Android、iOS、Linux、OS X和Windows等平台。本文将指导你使用Kivy创建“Hello World”应用并打包成Android APK。首先通过`pip install kivy`安装Kivy,然后创建并运行一个简单的Python脚本。接着,安装Buildozer并通过`buildozer init`生成配置文件,修改相关设置后,运行`buildozer -v android debug`命令打包应用。完成构建后,你将在`./bin/`目录下找到类似`your-app-debug.apk`的文件。
12 2
|
7天前
|
缓存 前端开发 Java
python之django
python之django
|
10天前
|
SQL 安全 Go
SQL注入不可怕,XSS也不难防!Python Web安全进阶教程,让你安心做开发!
在Web开发中,安全至关重要,尤其要警惕SQL注入和XSS攻击。SQL注入通过在数据库查询中插入恶意代码来窃取或篡改数据,而XSS攻击则通过注入恶意脚本来窃取用户敏感信息。本文将带你深入了解这两种威胁,并提供Python实战技巧,包括使用参数化查询和ORM框架防御SQL注入,以及利用模板引擎自动转义和内容安全策略(CSP)防范XSS攻击。通过掌握这些方法,你将能够更加自信地应对Web安全挑战,确保应用程序的安全性。
39 3
|
9天前
|
机器学习/深度学习 人工智能 算法
【果蔬识别系统】Python+卷积神经网络算法+人工智能+深度学习+计算机毕设项目+Django网页界面平台
【果蔬识别系统】Python+卷积神经网络算法+人工智能+深度学习+计算机毕设项目+Django网页界面平台。果蔬识别系统,本系统使用Python作为主要开发语言,通过收集了12种常见的水果和蔬菜('土豆', '圣女果', '大白菜', '大葱', '梨', '胡萝卜', '芒果', '苹果', '西红柿', '韭菜', '香蕉', '黄瓜'),然后基于TensorFlow库搭建CNN卷积神经网络算法模型,然后对数据集进行训练,最后得到一个识别精度较高的算法模型,然后将其保存为h5格式的本地文件方便后期调用。再使用Django框架搭建Web网页平台操作界面,实现用户上传一张果蔬图片识别其名称。
28 0
【果蔬识别系统】Python+卷积神经网络算法+人工智能+深度学习+计算机毕设项目+Django网页界面平台
|
6天前
|
iOS开发 Python
6-8|如何使用Python语言开发IOS混淆工具
6-8|如何使用Python语言开发IOS混淆工具
|
IDE 开发工具 Android开发
Python开发神器PyCharm,体验下吧
Python开发神器PyCharm,体验下吧
170 0
Python开发神器PyCharm,体验下吧
|
存储 监控 IDE
猪行天下之Python基础——1.3 Python开发IDE之PyCharm(下)
内容简述: 1、为什么要使用IDE? 2、PyCharm的下载安装 3、PyCharm的基本使用 4、PyCharm程序调试 5、共用全局的Python解释器
256 0
下一篇
无影云桌面