在使用Django加载图片时遇到了一些问题,在模板html文件中无论使用绝对路径还是当前相对路径都无法找到图片,一直报403和404的错误,后来结合官网和网上的其他资料总算是成功了,这里记下来。

参考网址:
Django将图片,JS,CSS等文件称作静态文件,如果你要在模板中引用这些静态文件,你必须设置static_url或者static_root。
1.修改settings.py文件,添加如下内容:
# Static files (CSS, JavaScript, Images)
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]

STATIC_URL的意思是将静态文件的http可访问路径设为/static/,而STATICFILES_DIRS则是真正存储静态文件的目录,你可以通过STATICFILES_DIRS添加多个静态文件存储目录。

2.修改模板中对于图片的引用路径:

{% load static %}
<img src="{% static "1.png" %}" alt="Leo头像" height=100 width=100 />

Django在查找图片时会默认的使用static()方法(前提是你INSTALLED_APPS里包含django.contrib.staticfiles)到你给定的STATICFILES_DIRS目录下寻找静态文件,这种load写法是官网写法,比较推荐。

我们还可以在static下建每个app的静态文件存放路径,http访问时只要加上app名就好了,例如<img src="{% static "app_name/1.png" %}" alt="Leo头像" height=100 width=100 />

3.创建相应的目录,并将图片放置到此路径下:

mkdir -p /root/Django/mysite/static   --/root/Django/mysite/是我的project根目录(BASE_DIR)

这样就可以实现调用了,示例结果如下:

而且此时我们还可以通过以下URL直接访问此图片:(这就是STATIC_URL的功能,但要保证此路径下图片真实存在)

http://192.168.1.193:8000/static/1.png --8000是我的对外端口

关于STATIC_ROOT:

以上的static_url参数使用的是基于BASE_DIR的相对路径,但很多时候我们引用的静态文件并不一定能被允许放在BASE_DIR目录下,可能是有一个统一的存放路径存放的,因此django的static()方法也提供了另一种访问方式,即STATIC_ROOT参数(static()的第二个输入参数):

你需要在settings.py中在STATIC_URL下面添加上此参数,其值是静态文件存放的绝对路径。
使用此参数时建议执行下python manage.py collectstatic,作用是将你STATIC_URL和STATICFILES_DIRS下的所有app静态文件全部拷贝至STATIC_ROOT目录下,这样就方便其他服务统一引用了。
STATIC_ROOT和STATIC_URL虽然都可以让你的app访问静态文件,但他们的根本区别在于STATIC_ROOT和STATICFILES_DIRS一样都是存真实文件的,而STATIC_URL只是一个url,告诉你怎么访问这些文件,如果你不设置STATIC_ROOT和STATICFILES_DIRS,那么只有你使用第三方的web服务器时指定静态文件路径,静态文件才能被访问,例如uwsgi。
此外如果将默认的DEBUG=True参数改为False,那么STAIC_URL下的文件也将不可通过http直接访问了,除非你将路径直接加入urls.py。

关于MEDIA_URL和MEDIA_ROOT:

上边解释的STATIC相关参数适用于静态的文件,对于用户上传的可修改的媒体文件例如头像图片等,放在STATIC_URL中就不合适了,MEDIA_URL和MEDIA_ROOT这俩参数就是用于处理媒体文件存储的。

MEDIA_URL和MEDIA_ROOT的差别基本等同于STATIC_URL和STATIC_ROOT的差别。

目前发现有一点不一样的:即便设置了MEDIA_URL也不能直接通过http访问到媒体文件,还是需要将路径加入urls.py,这点需要注意。

更多的关于在正式开发中处理静态文件和媒体文件的信息,参考官方文档:

https://docs.djangoproject.com/en/2.1/howto/static-files/

https://docs.djangoproject.com/en/2.1/howto/static-files/deployment/

Django之--模板加载图片的更多相关文章

  1. django之创建第12个项目-加载图片

    百度云盘:django之创建第12个项目-加载图片 1.setting配置 #静态文件相关配置 # URL prefix for static files. # Example: "http ...

  2. vue动态加载图片,取消格式验证

    vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...

  3. Django中CSS加载background url('')问题

    Django中CSS加载background url('')问题   在django中, 默认CSS中如果有 background url('images/a.jpg') 这类的属性,会被django ...

  4. 【MFC】picture控件 两种有细微差别的动态加载图片方法

    摘自:http://www.jizhuomi.com/software/193.html VS2010/MFC编程入门之二十七(常用控件:图片控件Picture Control) 分类标签: 编程入门 ...

  5. CSS3学习总结——实现瀑布流布局与无限加载图片相册

    首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...

  6. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

  7. android 网络加载图片,对图片资源进行优化,并且实现内存双缓存 + 磁盘缓存

    经常会用到 网络文件 比如查看大图片数据 资源优化的问题,当然用开源的项目  Android-Universal-Image-Loader  或者 ignition 都是个很好的选择. 在这里把原来 ...

  8. ImageLoader加载图片

    先导universal-image-loader-1.9.3包 在application配置 android:name=".MyApplication" intent权限 1 pa ...

  9. chrome (failed) net::ERR_INCOMPLETE_CHUNKED_ENCODING ashx 加载图片

    chrome (failed) net::ERR_INCOMPLETE_CHUNKED_ENCODING   ashx文件加载图片的方法,发现在chrome浏览器里面出了异常: (failed) ne ...

随机推荐

  1. Redis 超时排查

    突然收到告警,提示redis挂了,同时大群也在说某某redis连接超时了,过了一会儿就恢复了.这时登上服务器,查看监控.首先看看qps: 可以看到qps并不高,但是中间有段时间没取到数据是怎么回事?那 ...

  2. MySQL模糊匹配查询like、regexp、in

    MySQL提供标准的SQL模式匹配,以及一种基于像Unix实用程序,如:vi.grep和sed的扩展正则表达式模式匹配的格式 一.SQL模式(% ,_) SQL的模式匹配允许你使用“_”匹配任何单个字 ...

  3. Apache Solr 实现去掉重复的搜索结果

    https://lucene.apache.org/solr/guide/7_2/collapse-and-expand-results.html#collapsing-query-parser 对应 ...

  4. Go语言远程执行ssh命令简单封装(支持带交互命令)

    使用包:golang.org/x/crypto/ssh 以下封装一个发送命令的Cli结构体 type Cli struct { IP string //IP地址 Username string //用 ...

  5. 翻译:ZooKeeper OverView

    ZooKeeper系列文章:https://www.cnblogs.com/f-ck-need-u/p/7576137.html#zk ZooKeeper: 分布式协调服务 ZooKeeper是一个开 ...

  6. Java线程实现与安全

    目录 1. 线程的实现 线程的三种实现方式 Java线程的实现与调度 2. 线程安全 Java的五种共享数据 保证线程安全的三种方式 前言 本篇博文主要是是在Java内存模型的基础上介绍Java线程更 ...

  7. Django 系列博客(六)

    Django 系列博客(六) 前言 本篇博客介绍 Django 中的路由控制部分,一个网络请求首先到达的就是路由这部分,经过路由与视图层的映射关系再执行相应的代码逻辑并将结果返回给客户端. Djang ...

  8. Linux命令-基本变量类型及其运算

    [root@Redis01 ~]# cd /install/[root@Redis01 install]# mkdir -p test && cd test -s修改时间:[root@ ...

  9. .Net C#域账号登陆验证

    //获取登陆页输入的域账号.密码 string domainIP = ""; //域IP string userAccount = ""; //域账号 stri ...

  10. 基于mvc三层架构和ajax技术实现最简单的文件上传

    前台页面提交文件 <!DOCTYPE html> <html><head> <meta name="viewport" content=& ...