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

我用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. ASP.NET保存信息总结(Application、Session、Cookie、ViewState和Cache等) ZT

    http://www.cnblogs.com/ranran/p/4065619.html http://www.cnblogs.com/jxlsomnus/p/4450911.html 以下是关于AS ...

  2. Eclipse取消设置项目默认空间

    分享一个小经验:       如果,在启动Eclipse时选中了Use this as the default and do not ask again 下次要启动时不会再次显示修改工作空间的选择, ...

  3. AIDL和生成的java文件要分开存放,否则生成can't find symbol class

    Android 5.0之后需要AIDL和生成的java文件要分开存放,否则生成can't fin symbol class.但是4.3没有这个限制.被这个弄了一天,跟老大讨论了一下才豁然开朗.

  4. 使用Graph工具观察FFT波形

    2014年8月1日,经过很长时间的上网查阅资料,走了很多弯路,终于可以成功使用Graph工具仿真波形了,虽然这个的确很简单,但是经过自己摸索出来的,兴奋之情难于言表. 明天就是七夕了,刚和女朋友分手的 ...

  5. Servlet学习二——doGet和doPost

    1.get和post是http协议中的两种方法,还有其它,读写一般数据还能满足: 2.get只有一个流,参数附加在url后,且大小个数有严格限制,这个限制因浏览器而有所不同,get传递数据,实际上是将 ...

  6. 粒子拼字效果(getImageData方法)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. redis的安装和启动

    Windows下Redis的安装及PHP扩展使用 时间 2014-10-28 17:47:09  CSDN博客 原文  http://blog.csdn.net/wyqwclsn/article/de ...

  8. Spring bean 实现初始化、销毁方法的方式及顺序

    Spring 允许 Bean 在初始化完成后以及销毁前执行特定的操作,常用方法有三种: 使用注解,在指定方法上加上@PostConstruct或@PreDestroy注解来制定该方法是在初始化之后还是 ...

  9. php js => splice 数组 插入 功能

    php    array_splice 手册详解 array_splice   - 把数组中的一部分去掉并用其它值取代 参数 input 输入的数组. offset 如果 offset 为正,则从 i ...

  10. 10款免费而优秀的图表JS插件

    http://www.open-open.com/lib/view/open1406378625726.html http://www.ichartjs.com http://echarts.baid ...