Captcha image src issue

Hi I am trying to use CI's captcha . All though my captcha is getting created , the src of the captcha img that CI is generating is not correct .

I have an User controller with register function like below : (Complete Controller is at pastebin https://pastebin.com/pSskpuy0)

PHP Code:

public function register(){ 
$this->form_validation->set_rules('user_name' , 'Username' , 'trim|required|max_length[32]'); 
$this->form_validation->set_rules('captcha' , 'Captcha' , 'trim|required|max_length[32]|callback_check_captcha');
$this->form_validation->set_rules('password', 'Password','trim|required|min_length[5]|max_length[12]');
$this->form_validation->set_rules('confirm_password', 'Confirm Password','trim|required|min_length[5]|max_length[12]|matches[password]');
$this->form_validation->set_rules('email', 'Email', 'trim|required|valid_email');
if ($this->form_validation->run()==FALSE){
//Captcha code 
$this->load->helper('captcha');
//Captcha Config 
$vals = array(
'img_path' => './captcha/',
'img_url' => './captcha/',
'img_width' => '150',
'img_height' => 30,
'expiration' => 7200,
'word_length' => 8,
'font_size' => 16,
'img_id' => 'Imageid',
'font_path' => '/fonts/Open.ttf',

// White background and border, black text and red grid
'colors' => array(
'background' => array(255, 255, 255),
'border' => array(255, 255, 255),
'text' => array(0, 0, 0),
'grid' => array(255, 40, 40)
)
);
//Create the Captcha
$cap = create_captcha($vals);

// Store The Created Captcha in DB for Verification 
$data = array(
'captcha_time' => $cap['time'],
'ip_address' => $this->input->ip_address(),
'word' => $cap['word']
);
$this->register_model->store_captcha($data);
//Load View
$data['image']=$cap['image'];
var_dump($data['image']);exit();
$this->load->view('templates/header');
$this->load->view('register' , $data);
$this->load->view('templates/footer');
}else {
$option=array('cost'=>12);
$encrypt_password=password_hash($this->input->post('password'),PASSWORD_BCRYPT,$option);
$this->register_model->add_user($encrypt_password);
$this->session->set_flashdata('user_registered','You are Successfully Registered and can Log in ');
redirect('register/success');
}
} 


If you see the above code I am setting the 'img_path' to './captcha/'(using the root relative method) . I have this folder captcha in the root .

I my view I have :

PHP Code:

<div class="form-group">
    <label>Enter UserID</label>
    <input type="text" class="form-control" name="user_name"  placeholder="Enter Your UserId">
  </div>
  <div class="form-group">
    <label>Enter Your Email</label>
    <input type="email" class="form-control" name="email"  placeholder="Enter Your Email">
  </div>
  <div class="form-group">
    <label>Enter Your Password </label>
    <input type="password" class="form-control" name="password"  placeholder="Enter Password">
  </div>
  <div class="form-group">
        <label>Re-enter Password </label>
        <input type="password" class="form-control" name="confirm_password"  placeholder="Renter Password">
  </div>
  <?php echo $image ; ?>
  <div class="form-group">
        <label>Solve Captcha </label>
        <input type="text" class="form-control" name="captcha" >
  </div>
   <button type="submit" class="btn btn-primary">Submit</button>
  <?php echo form_close();?>

The problem is my image is not showing up . When inspected the captcha image I found it to be correct like below :

Code:

<img id="Imageid" src="./captcha/1551023447.5228.jpg" style="width: 150; height: 30; border: 0;" alt=" ">

However , the src is actually getting 'computed' to : /login/user/captcha/1551023447.5228.jpg]http://[::1]/login/user/captcha/1551023447.5228.jpg  instead of  /login/captcha/1551023447.5228.jpg]http://[::1]/login/user/captcha/1551023447.5228.jpg . 



Could somebody tell me why the src is pointing to /login/user/captcha/1551023447.5228.jpg]http://[::1]/login/user/captcha/1551023447.5228.jpg all though it should be /login/captcha/1551023447.5228.jpg]http://[::1]/login/captcha/1551023447.5228.jpg and how we can fix this ? Surprisingly the same code is running all right in another project with same directory structure .

You told it where to point. Your URI is "/login/user/register, so the browser thinks you are in the "/login/user" folder, and the reference "/login/user/captcha..." is correct from its perspective.

If you actually meant to refer to something in your document root, then the reference should be "/captcha/...", without the leading "."