Django1.9 加载通过ImageField上传的图片方法

这里假设你是通过models的ImageField上传图片，并期望在前台img标签中能显示。能否访问图片关键在于，是否能通过正确的路径访问。

在models.py中有image如下

image = models.ImageField(upload_to='images/%Y/%m', verbose_name='文件缩略图')

在显示页面中如show.html中使用img标签显示

<img class="center-block thumbnail" src="{{result.object.image.url }}" alt="" />

不过这里{{result.object.image.url}}只是读取出了上面模型upload_to下面的路径,并不能真正显示出来。要在模板中显示，还需要在urls.py和settings.py配置

下一步，在你的urls.py中配置如下： 

from django.conf.urls import include, url
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
  '''你的其他url配置'''
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

setttings.py中配置 MEDIA_URL 和 MEDIA_ROOT,这里定义了media相关配置，也就是定义了模型中ImageField里的参数upload_to所在目录

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

到此，我们能够正确访问通过ImageFields上传的图片，下面是官方文档上面的一些说明

具体的相关文档

在模型中调用FileField 或 ImageField (见下方) 需如下几步：

在你的settings文件中, 你必须要定义 MEDIA_ROOT 作为Django存储上传文件的路径(从性能上考虑，这些文件不能存在数据库中。) 定义一个 MEDIA_URL 作为基础的URL或者目录。确保这个目录可以被web server使用的账户写入。

在模型中添加FileField 或 ImageField 字段, 定义 upload_to参数，内容是 MEDIA_ROOT 的子目录，用来存放上传的文件。

数据库中存放的仅是这个文件的路径 （相对于MEDIA_ROOT). 你很可能会想用由Django提供的便利的url 属性。比如说, 如果你的ImageField 命名为 mug_shot, 你可以在template中用 {{ object.mug_shot.url }}获得你照片的绝对路径。

例如，如果你的 MEDIA_ROOT设定为 ‘/home/media'，并且 upload_to设定为 photos/%Y/%m/%d。 upload_to的'%Y/%m/%d‘被strftime()所格式化；'%Y' 将会被格式化为一个四位数的年份, ‘%m' 被格式化为一个两位数的月份'%d'是两位数日份。如果你在Jan.15.2007上传了一个文件，它将被保存在/home/media/photos/2007/01/15目录下.

以上这篇Django1.9 加载通过ImageField上传的图片方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • django上传图片并生成缩略图方法示例

    django 处理上传图片生成缩略图首先要注意form标签上必须有enctype="multipart/form-data"属性,另外要装好PIL库, 然后就很简单了,如下是实例代码: upload.html <div id="uploader"> <form id="upload" enctype="multipart/form-data" action="/ajax/upload/"

  • Django 实现图片上传和显示过程详解

    第1章 新建工程和创建app 新建工程和创建app就不用贴出来了,我这里是测试图片上传的功能能否实现,所以项目都是新的,正常在以有的app下就可以 第2章 模型层: 2.1创建数据库 from django.dbimport models # Create your models here. class User(models.Model): name= models.CharField(max_length=50) # upload_to 指定上传文件位置 # 这里指定存放在img/ 目录下

  • Django框架文件上传与自定义图片上传路径、上传文件名操作分析

    本文实例讲述了Django框架文件上传与自定义图片上传路径.上传文件名操作.分享给大家供大家参考,具体如下: 文件上传 1.创建上传文件夹 在static文件夹下创建uploads用于存储接收上传的文件 在settings中配置, MEDIA_ROOT=os.path.join(BASE_DIR,r'static/uploads') 2.定义上传表单 <form action="{% url 'app:do_upload' %}" method="post"

  • django mysql数据库及图片上传接口详解

    django mysql数据库及图片上传接口详解

    前言 我们在 django-rest-framework解析请求参数 文章中完成了接口文档到参数解析, 一个完整的流程中还缺少对数据库的操作. 本篇内容为django连接数据库, 并编写一个image表用来存储图片路径, 编写图片上传接口和查看数据库中所有图片路径的接口. 前期准备 django操作图片需要安装一个三方库叫做,Pillow workon python35 pip install pillow pip install pymysql Pillow这个库可以对图片进行操作, 例如生成

  • Django Admin实现上传图片校验功能

    Django Admin实现上传图片校验功能

    Django 为未来的开发人员提供了许多功能:一个成熟的标准库,一个活跃的用户社区,以及 Python 语言的所有好处.虽然其他 Web 框架也声称能提供同样的内容,但 Django 的独特之处在于它内置了管理应用程序 -- admin. admin 提供了开箱即用的高级 Create-Read-Update-Delete (CRUD) 功能,减少了重复工作所需的时间.这是许多 Web 应用程序的关键所在,程序员可以在开发时快速浏览他们的数据库模型:非技术最终用户可以在部署时使用 admin 添

  • django将图片上传数据库后在前端显式的方法

    1.使用ImageField先安装pillow模块 pip install pillow 2.在app的models中设置 class Image(models.Model): pic_name=models.CharField('图片',max_length=40) pic_path=models.ImageField(upload_to="pic_folder/",default='pic_folder/None/no_image.pig') 3.在app的view中设置获取图片的

  • Django如何实现上传图片功能

    Django如何实现上传图片功能

    前言 很多时候我们要用到图片上传功能,如果图片一直用放在别的网站上,通过加载网址的方式来显示的话其实也挺麻烦的,我们通过使用 django-filer 这个模块实现将图片文件直接放在自己的网站上. 感兴趣的同学可以看下官方介绍:https://github.com/divio/django-filer 1. 使用 pip 安装. pip install django-filer 这个模块需要 django-mptt, easy_thumbnails, django-polymorphic 以及

  • Django1.9 加载通过ImageField上传的图片方法

    这里假设你是通过models的ImageField上传图片,并期望在前台img标签中能显示.能否访问图片关键在于,是否能通过正确的路径访问. 在models.py中有image如下 image = models.ImageField(upload_to='images/%Y/%m', verbose_name='文件缩略图') 在显示页面中如show.html中使用img标签显示 <img class="center-block thumbnail" src="{{re

  • Django 使用easy_thumbnails压缩上传的图片方法

    easy_thumbnails:A powerful, yet easy to implement thumbnailing application for Django 1.4+ 安装 pip install easy_thumbanils 在你的项目中配置 setting.py INSTALLED_APPS中添加 'easy_thumbanils' 如果Django1.7及以上,运行python manage.py migrate easy_thumbnails 否则,运行python ma

  • Scratch3.0初始化加载七牛云上的sbs文件的方法

    Scratch3.0初始化加载七牛云上的sbs文件的方法

    下面通过代码介绍下Scratch3.0初始化加载七牛云上的sbs文件,代码如下所示: 编写组件 import PropTypes from 'prop-types'; import React from 'react'; import {connect} from 'react-redux'; import {injectIntl, intlShape} from 'react-intl'; import analytics from '../lib/analytics'; import log

  • Flutter ListView 上拉加载更多下拉刷新功能实现方法

    先上图 下拉刷新 跟原生开发一样,下拉刷新在flutter里提供的有组件实现 RefreshIndicator 一直不明白为啥组件中都提供下拉刷新,但就是没有上拉加载!! 我这请求接口数据用的是 http 库,是个第三方的是需要安装的 https://pub.dev/packages/http 用法如下 class MyHomePage extends StatefulWidget { MyHomePage({Key key}) : super(key: key); @override MyHo

  • form+iframe解决跨域上传文件的方法

    (1)  jsp代码: <form id="form" name="form" enctype="multipart/form-data" method="post" target="hidden_frame"> <table style="border:0;width:100%;text-align:middle;"> <tr style="bo

  • android实现上传本地图片到网络功能

    本文实例为大家分享了android上传本地图片到网络的具体代码,供大家参考,具体内容如下 首先这里用到了Okhttp 所以需要一个依赖: compile 'com.squareup.okhttp3:okhttp:3.9.0' xml布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res

  • 基于Bootstrap模态对话框只加载一次 remote 数据的解决方法

    基于Bootstrap模态对话框只加载一次 remote 数据的解决方法

    摘要: 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题. 1. Bootstrap 模态对话框和简单使用 <div id="myModal" class="modal hide fade"> <div class="moda

  • JSP中图片的上传与显示方法实例详解

    本文实例讲述了JSP中图片的上传与显示方法.分享给大家供大家参考.具体如下: 1.引言 数据库应用程序,特别是基于WEB的数据库应用程序,常会涉及到图片信息的存储和显示.通常我们使用的方法是将所要显示的图片存在特定的目录下,在数据库中保存相应的图片的名称,在JSP中建立相应的数据源,利用数据库访问技术处理图片信息.但是,如果我们想动态的显示图片,上述方法就不能满足需要了.我们必须把图片存入数据库,然后通过编程动态地显示我们需要的图片.实际操作中,可以利用JSP的编程模式来实现图片的数据库存储和显

  • 谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"upload",其它的不做任何处理: <form method="POST" action="upload" enctype="multipart/form-data"> 名字 <input type="text&q

  • vue中使用axios post上传头像/图片并实时显示到页面的方法

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto" v-show="personalPhoto"> <div class="viewPhoto"> <img src="" alt="" id="portrait"style=&q

随机推荐