urlpatterns = [
    ......
    url(r'^login/', views.login, name='login'),
    # 圖片驗證碼
    url(r'^get_code/', views.get_code, name='gc'),
    ...
]

...
<div class="form-group">
    <label for="">驗證碼</label>
    <div class="row">
        <div class="col-md-6">
            <input type="text" name="code" id="id_code" class="form-control">
        </div>
        <div class="col-md-6">
            <img src="/get_code/" alt="" width="430" height="35" id="id_img">
        </div>
    </div>

</div>
<input type="button" class="btn btn-success" value="登陸" id="id_commit">
...

def get_code(request):
    # 直接獲取后端現(xiàn)成的圖片二進制數(shù)據(jù)發(fā)送給前端
    with open(r'static/img/test.jpg','rb') as f:
        data = f.read()
    return HttpResponse(data)

pip3 install pillow

import random
from PIL import Image, ImageDraw, ImageFont

def get_random():
    return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)


def get_code(request):
    # 利用pillow模塊動態(tài)產(chǎn)生圖片
    # img_obj = Image.new('RGB',(430,35),'green')  # RGB組合、圖片尺寸、顏色
    img_obj = Image.new('RGB',(430,35),get_random())  # 通過色值指定顏色
    # 先將圖片對象保存起來
    with open('xxx.png','wb') as f:
        img_obj.save(f,'png')
    # 再將圖片對象讀取出來
    with open('xxx.png','rb') as f:
        data = f.read()
    return HttpResponse(data)

import random
from PIL import Image, ImageDraw, ImageFont

def get_random():
    return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)


def get_code(request):
    img_obj = Image.new('RGB', (430, 35), get_random())
    io_obj = BytesIO()  # 生成一個內(nèi)存管理器對象  你可以看成是文件句柄
    img_obj.save(io_obj,'png')
    return HttpResponse(io_obj.getvalue())  # 從內(nèi)存管理器中讀取二進制的圖片數(shù)據(jù)返回給前端

import random
from PIL import Image, ImageDraw, ImageFont

def get_random():
    return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)


def get_code(request):
    # 寫圖片驗證碼
    img_obj = Image.new('RGB', (430, 35), get_random())
    img_draw = ImageDraw.Draw(img_obj)  # 產(chǎn)生一個畫筆對象
    # 引入本地的字體文件，指定字體樣式及字體大小
    img_font = ImageFont.truetype('static/font/222.ttf', 30) 
    # 隨機驗證碼 五位數(shù)的隨機驗證碼  數(shù)字 小寫字母 大寫字母
    code = ''
    for i in range(5):
        random_upper = chr(random.randint(65, 90))  # 隨機大寫字母
        random_lower = chr(random.randint(97, 122))  # 隨機小寫字母
        random_int = str(random.randint(0, 9))  # 隨機數(shù)字
        # 每次從上面三個里面隨機選擇一個
        tmp = random.choice([random_lower, random_upper, random_int])
        # 將產(chǎn)生的隨機字符串寫入到圖片上，需要調(diào)整每個字體所在的坐標變換
        img_draw.text((i * 60 + 60, -2), tmp, get_random(), img_font)
        # 拼接隨機字符串
        code += tmp
    print(code)
    # 隨機驗證碼在登陸的視圖函數(shù)里面需要要比對,所以要找地方存起來并且其他視圖函數(shù)也能拿到
    request.session['code'] = code
    io_obj = BytesIO()
    img_obj.save(io_obj, 'png')
    return HttpResponse(io_obj.getvalue())

......
def login(request):
    if request.method == 'POST':
        back_dic = {'code': 1000, 'msg': ''}
        username = request.POST.get('username')
        password = request.POST.get('password')
        code = request.POST.get('code')
        # 1 先校驗驗證碼是否正確  自己決定是否忽略大小寫 統(tǒng)一轉(zhuǎn)大寫或小寫再比較
        if request.session.get('code').upper() == code.upper():
            # 校驗用戶名和密碼是否正確
            user_obj = auth.authenticate(request,username=username,password=password)
            if user_obj:
                # 保存用戶狀態(tài)
                auth.login(request,user_obj)
                back_dic['url'] = '/home/'
            else:
                back_dic['code'] = 2000
                back_dic['msg'] = '用戶名或密碼錯誤'
        else:
            back_dic['code'] = 3000
            back_dic['msg'] = '驗證碼錯誤'
        return JsonResponse(back_dic)
    return render(request, 'login.html')

...
       <div class="form-group">
            <label for="">驗證碼</label>

            <div class="row">
                <div class="col-md-6">
                    <input type="text" name="code" id="id_code" class="form-control">
                </div>
                <div class="col-md-6">
                    <img src="/get_code/" alt="" width="430" height="35" id="id_img">
                </div>
            </div>

        </div>
        <input type="button" class="btn btn-success" value="登陸" id="id_commit">
...
<script>
    $("#id_img").click(function () {
        // 獲取標簽之前的src
        let oldVal = $(this).attr('src');
        $(this).attr('src',oldVal += '?')
    })
</script>