Django之--模板加载图片
在使用Django加载图片时遇到了一些问题,在模板html文件中无论使用绝对路径还是当前相对路径都无法找到图片,一直报403和404的错误,后来结合官网和网上的其他资料总算是成功了,这里记下来。
1 2 3 4 5 | # 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.修改模板中对于图片的引用路径:
1 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.创建相应的目录,并将图片放置到此路径下:
1 | mkdir -p /root/Django/mysite/ static --/root/Django/mysite/是我的project根目录(BASE_DIR) |
这样就可以实现调用了,示例结果如下:
而且此时我们还可以通过以下URL直接访问此图片:(这就是STATIC_URL的功能,但要保证此路径下图片真实存在)
1 | http://192.168.1.193:8000/ static /1.png --8000是我的对外端口 |
关于STATIC_ROOT:
以上的static_url参数使用的是基于BASE_DIR的相对路径,但很多时候我们引用的静态文件并不一定能被允许放在BASE_DIR目录下,可能是有一个统一的存放路径存放的,因此django的static()方法也提供了另一种访问方式,即STATIC_ROOT参数(static()的第二个输入参数):
关于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/
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)