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

一张美观的网页元素有很多，包括文字、图片、视频、音频、共享文件等，在前面的4期中，我们介绍了Python编程实现django框架开发渲染自己的模板网页，但是到目前为止仍然无法实现图片、视频等资源文件的展示。本期教程属于《刘金玉的Django网站开发课程》电子书第三章，主要解决这个问题，那么就开始吧！

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

刘金玉编程感谢您的支持！

刘金玉编程，编程创造城市！

【刘金玉编程Django框架教程Python课程实战系列书籍目录】

联系作者：刘金玉