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

我用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. JS中this的指向问题&使用call或apply模拟new

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

  2. Java 利用HttpURLConnection发送http请求

    写了一个简单的 Http 请求的Class,实现了 get, post ,postfile package com.asus.uts.util; import org.json.JSONExcepti ...

  3. Head First Html and CSS学习笔记之HTML

    初学前端开发,记录下自己的学习笔记. 第一章 认识HTML 1:关于HTML HTML是超文本标记语言(HyperText Markup Language)的缩写,用来建立网页的结构. 它只会根据标记 ...

  4. freemarker

    一.下载freemarker的jar包,到maven仓库下载 二.引入jar包,参考freemarker的手册写代码 1.Test.ftlh <!DOCTYPE html> <htm ...

  5. sass、less和stylus的安装使用和入门实践

    刚 开始的时候,说实话,我很反感使用css预处理器这种新玩意的,因为其中涉及到了编程的东西,私以为很复杂,而且考虑到项目不是一天能够完成的,也很少是 一个人完成的,对于这种团队的项目开发,前端实践用c ...

  6. 【css3】浏览器内核及其兼容性

    浏览器内核分类如下: 1.Webkit内核: 使用此引擎内核的浏览器有:Safari(包括移动版和桌面版).Chrome.其私有属性的前缀是-webkit-. 2.Gecko内核: 使用此引擎内核的浏 ...

  7. tesseract配置过程

    tesseract配置过程: 1. 为了避免配置环境变量,可以先下载一个 tesseract-ocr-setup-3.02.02.exe(tesseract配置文件夹里有),然后安装(假设安装目录为D ...

  8. Iterator(迭代器)-对象行为型模式

    1.意图 提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露该对象的内部表示. 2.别名 Cursor-游标. 3.动机 一个聚合对象,应该提供一种方法来让别人可以访问它的元素,而又不需暴露它的 ...

  9. matlab 连续读取多个文件

    方法1: 把文件的文件名按一定的规律命名,假如:filename1.txt,filename2.txt,...,fielname100.txt,在读取的时候则可以使用循环: for i = 1:100 ...

  10. Windows 2012 R2图标以及字体颜色发生变化更改成默认设置

    1. 在桌面按"Win+R",然后输出regedit.2. 定位到HKEY_CURRENT_USER\Control panel\Colors3. 对照下面提供给您的初始化颜色的注 ...