今天在做一个注册页面的时候遇到了一个验证码图片在页面显示的问题。

我用requests从一个url上获取到一张图片, 没有保存到本地, 而是想直接作为render的字典参数,传到页面里进行渲染。因为requests.get(url)得到的response.content是bytes, 无法像jpg等本地图片文件直接加到<img src="">中,

我的代码是这样的:

 def get_captcha(request):
CAPTCHA_URL = "http://jw.qdu.edu.cn/academic/getCaptcha.do"
session = requests.session()
image = session.get(CAPTCHA_URL)
request.session['JSESSIONID'] = session.cookies['JSESSIONID']
print type(image.content)
return image.content def register(request):
if request.method == "GET":
captcha = get_captcha(request)
return render(request, 'student/register.html', {'captcha': captcha})

Html代码是这样的register.html

 <input type="captcha" id="captcha" name="captcha" placeholder="请输入验证码">
<img src="{{ captcha }}" />

百思不得其解,上网也没有查阅到相关的信息。

最后求助了django方面很牛逼的一个学长, 他告诉我要对response.content进行base64编码, 然后就可以渲染到页面上去。加入了base64编码之后,可是图片依然显示不出来

 def register(request):
if request.method == "GET":
captcha = get_captcha(request)
captcha = b64encode(captcha)
return render(request, 'student/register.html', {'captcha': captcha})

想到是否是在html页面中的代码不对, 之后在网上查阅信息才得知, 经过base64编码的图片在html的<img>标签显示时,需要添加一些属性,即下面的data:image/jpeg;base64。 感谢博文:在浏览器中使用Base64编码的图像

 <input type="captcha" id="captcha" name="captcha" placeholder="请输入验证码">
<img src="data:image/jpeg;base64,{{ captcha }}" />

终于可以显示了。

[django]用requests从url获取图片(数据类型是bytes)后如何在template中显示出来的更多相关文章

  1. iOS根据Url 获取图片尺寸

    iOS根据Url 获取图片尺寸 // 根据图片url获取图片尺寸 +(CGSize)getImageSizeWithURL:(id)imageURL { NSURL* URL = nil; if([i ...

  2. 根据Url 获取图片尺寸 iOS

    // 根据图片url获取图片尺寸 +(CGSize)getImageSizeWithURL:(id)imageURL {     NSURL* URL = nil;     if([imageURL ...

  3. iOS开发——根据Url 获取图片尺寸

    转自:http://www.oschina.net/code/snippet_2248391_53038 // 根据图片url获取图片尺寸 +(CGSize)getImageSizeWithURL:( ...

  4. 根据URL获取图片

    背景:今天因为生产环境的系统界面图片无法显示被领导叼了一波,之前用Hutool工具类解析URL获取图片的,在生产环境上跑了一个多月都正常,嘣,今天突然发现周六下午后的图片统统显示异常,之后改为用jav ...

  5. C# url获取图片流转字符串

    //http url获取图片流转字符串 //string url = serverUrl.TrimEnd('/') + PUrl; //WebRequest request = WebRequest. ...

  6. 通过url获取图片尺寸的几种方法:JS和php

    首先是js的方法,通过new一个Image对象,设置src属性,并监听complete和onload事件,图片加载完成后输出图片的宽度和高度 function checkPicurl(url){ va ...

  7. 使用Python和OpenCV通过网址URL获取图片

    在OpenCV中通过图片的URL地址获取图片: # -*- coding: utf-8 -*- import numpy as np import urllib import cv2 # URL到图片 ...

  8. 根据图片URL获取图片的尺寸【Swift语言实现】

    import UIKit extension UIImage { /// 获取网络图片尺寸 /// /// - Parameter url: 网络图片链接 /// - Returns: 图片尺寸siz ...

  9. 从URL获取图片并保存到本地

    /// <summary> /// HttpWebRequest Property /// </summary> /// <param name="fileNa ...

随机推荐

  1. 《全唐诗》的sqlite3数据库

    下载地址: http://pan.baidu.com/s/1b2mE54quantangshi.db是sqlite3数据库,包括2张表.index表:volume 列(整数,主键) 表示卷号,从1到9 ...

  2. JS中this的指向问题&使用call或apply模拟new

    this的指向由调用时决定而不是定义时决定,定义的方式: //直接定义在函数里 var a="window中的a"; var name="window"; fu ...

  3. http://www.cnblogs.com/zhaoguihua/tag/%E9%AB%98%E6%80%A7%E8%83%BD%E7%BD%91%E7%AB%99/

    http://www.cnblogs.com/zhaoguihua/tag/%E9%AB%98%E6%80%A7%E8%83%BD%E7%BD%91%E7%AB%99/

  4. 4.struts2中的文件上传,下载

    Struts2中文件的上传下载,是借用commons里面的包实现文件的上传,需要导入两个jar commons-fileupload-1.2.2.jar commons-io-2.0.1.jar 实现 ...

  5. 高效Web开发的10个jQuery代码片段

    原文转载:http://www.codeceo.com/article/10-jquery-snippets-web-dev.html

  6. Tomcat 7.x热部署

    由于在开发阶段,需要频繁的修改源代码,如果每次修改完代码都去重启服务器来检测效果,那简直麻烦到你想死,又耽误时间,所以,在网上找了许久,终于找到了解决办法, 特来分享 我也试了修改Server.xml ...

  7. nginx + lua + redis 防黑IP

    lua脚本 local redis = require "resty.redis" local red = redis.new() red.connect(red, '127.0. ...

  8. SQL中EXISTS怎么用[转]

    SQL中EXISTS怎么用 1 2 3 4 分步阅读 EXISTS用于检查子查询是否至少会返回一行数据,该子查询实际上并不返回任何数据,而是返回值True或False 方法/步骤 1 EXISTS用于 ...

  9. FMDB中 databaseWithPath 的使用问题

    阅读fmdb的源码文件(下载地址http://github.com/ccgus/fmdb)会发现下面一段注释,里面提到的创建数据库的方法也在很多博客中被引用,但是跑代码的时候发现,文件并不会像文档中所 ...

  10. curl 模拟登录微信公众平台带验证码

    这段时间一直写个项目, 从切图到前端到后台都要搞定,真tm累. 今天下午手残,不停用错误的密码去模拟登录微信公众平台,结果后来出现验证码,瞬间悲剧(菜鸟从来没搞过带验证码的). 研究了一下,发现其实很 ...