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

我用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. 路由器TL-WR941N V5.1:救砖、MOD

    完成效果图: --- 拆芯片时需要贴上胶带,防止误伤: --- 堆锡拆除旧的flash芯片: --- 购入物品: --- 编程器刷入Breed: --- Web刷机: --- 预处理材料: --- 7 ...

  2. linux下mv命令使用方法

    1.作用mv命令来为文件或目录改名或将文件由一个目录移入另一个目录中.该命令等同于DOS系统下的ren和move命令的组合.它的使用权限是所有用户.2.格式mv [options] 源文件或目录 目标 ...

  3. NodeJS 常用模块

    NodeJS 模块: n:NodeJS 版本管理/切换 参考: https://github.com/tj/n ExpressJS:Web 框架 参考: http://expressjs.com/ m ...

  4. HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用

    你好,这个属性主要是设置浏览器优先使用什么模式来渲染页面的.常见写法如下:<meta http-equiv="X-UA-Compatible" content="I ...

  5. asp.net(C#)利用QRCode生成二维码(续)-在二维码图片中心加Logo或图像

    <%@ WebHandler Language="C#" Class="GetQRCode" %> using System; using Syst ...

  6. Exception Type & Exception Code

    1.Exception Type 1)EXC_BAD_ACCESS 此类型的Excpetion是我们最长碰到的Crash,通常用于访问了不改访问的内存导致.一般EXC_BAD_ACCESS后面的&qu ...

  7. location对象

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

  8. @EnableAutoConfiguration

    1. spring文档 解释一: Enable auto-configuration of the Spring Application Context, attempting to guess an ...

  9. svn:ignore eclipse开发一般忽略文件

    target.project.classpath.settings

  10. JavaWeb 学习001-登录页面

    首先实现一个web应用的登录页面 1.遇到的问题: Servlet中 post 或者 get 方式 不能提交? 就是提交后,控制台没有反应,而且浏览器显示如图: 这样应该是不能进行页面的跳转,对这个, ...