Question

我是PHP新手，正在尝试使用this tutorial使用PHP和jQuery实现验证码。页面加载时，它会显示损坏的图像而不是验证码。当我点击刷新图片时，我在控制台中收到此错误：

Resource interpreted as Image but transferred with MIME type text/html

我不确定为什么我会收到此错误。有没有我需要修改的服务器设置，或者我只是缺少一些PHP？

form.html

<label class="" for="captcha">*Please enter the verication code shown below.</label>
<div id="captcha-wrap"><img src="/img/refresh.jpg" alt="refresh captcha" id="refresh-captcha" /> <img src="/php/newCaptcha.php" alt="" id="captcha" />
</div>
<input class="narrow text input" id="captcha" name="captcha" type="text" placeholder="Verification Code">

newCaptcha.php

<?php
session_start();
$string = '';
for ($i = 0; $i < 5; $i++) {
    $string .= chr(rand(97, 122));
}

$_SESSION['captcha'] = $string; //store the captcha

$dir = '../fonts/';
$image = imagecreatetruecolor(165, 50); //custom image size
$font = "PlAGuEdEaTH.ttf"; // custom font style
$color = imagecolorallocate($image, 113, 193, 217); // custom color
$white = imagecolorallocate($image, 255, 255, 255); // custom background color
imagefilledrectangle($image,0,0,399,99,$white);
imagettftext ($image, 30, 0, 10, 40, $color, $dir.$font, $_SESSION['captcha']);

header("Content-type: image/png");
imagepng($image);
?>

main.js

WEBAPP = {

    settings: {},
    cache: {},

    init: function() {

        //DOM cache
        this.cache.$form = $('#captcha-form');
        this.cache.$refreshCaptcha = $('#refresh-captcha');
        this.cache.$captchaImg = $('img#captcha');
        this.cache.$captchaInput = $(':input[name="captcha"]');

        this.eventHandlers();
        this.setupValidation();

    },

    eventHandlers: function() {

        //generate new captcha
        WEBAPP.cache.$refreshCaptcha.on('click', function(e)
        {
            WEBAPP.cache.$captchaImg.attr("src","/php/newCaptcha.php?rnd=" + Math.random());
        });
    }

}

WEBAPP.init();

});

将php文件设置为img src时出错

0 个答案: