今天在做一個注冊頁面的時候遇到了一個驗證碼圖片在頁面顯示的問題。
我用requests從一個url上獲取到一張圖片, 沒有保存到本地, 而是想直接作為render的字典參數,傳到頁面里進行渲染。因為requests.get(url)得到的response.content是bytes, 無法像jpg等本地圖片文件直接加到<img src="">中,
我的代碼是這樣的:
1 def get_captcha(request): 2 CAPTCHA_URL = "http://jw.qdu.edu.cn/academic/getCaptcha.do" 3 session = requests.session() 4 image = session.get(CAPTCHA_URL) 5 request.session['JSESSIONID'] = session.cookies['JSESSIONID'] 6 print type(image.content) 7 return image.content 8 9 def register(request): 10 if request.method == "GET": 11 captcha = get_captcha(request) 12 return render(request, 'student/register.html', {'captcha': captcha})
Html代碼是這樣的register.html
1 <input type="captcha" id="captcha" name="captcha" placeholder="請輸入驗證碼"> 2 <img src="{{ captcha }}" />
百思不得其解,上網也沒有查閱到相關的信息。
最后求助了django方面很牛逼的一個學長, 他告訴我要對response.content進行base64編碼, 然后就可以渲染到頁面上去。加入了base64編碼之后,可是圖片依然顯示不出來
1 def register(request): 2 if request.method == "GET": 3 captcha = get_captcha(request) 4 captcha = b64encode(captcha) 5 return render(request, 'student/register.html', {'captcha': captcha})
想到是否是在html頁面中的代碼不對, 之后在網上查閱信息才得知, 經過base64編碼的圖片在html的<img>標簽顯示時,需要添加一些屬性,即下面的data:image/jpeg;base64。 感謝博文:在瀏覽器中使用Base64編碼的圖像
1 <input type="captcha" id="captcha" name="captcha" placeholder="請輸入驗證碼"> 2 <img src="data:image/jpeg;base64,{{ captcha }}" />
終於可以顯示了。
