在从该页面加载资源之前将HTTP身份验证传递给页面

I have a page that dynamically creates a URL for an image which is grabbed from another page. To explain the src for the image contains timestamps for start and end time of a graph in EPOCH:

<img src="http://checkstuff.com/livedata/index.php/image?source=0&host=randomhost.com&start=$start_time&end=$end_time&graph_height=150&graph_width=520"></img>

The page contains a HTML form that the user can input some data such as start and end dates and times:

<form action="index.php" method="POST" name="past">
<div>
Set start time of graphs:
<br>
Date: <input type="date" name="start_date" value="<?php if (isset($_POST['start_date'])) {echo $_POST['start_date'];}?>" required></input>
Hour: <input type="number" name="start_hour" value="<?php if (isset($_POST['start_date'])) {echo $_POST['start_hour'];}?>" required></input>
Minute: <input type="number" name="start_minute" value="<?php if (isset($_POST['start_date'])) {echo $_POST['start_minute'];}?>" required></input>
<br>
</div>

<div>
Set end time of graphs:
<br>
Date: <input type="date" name="end_date" value="<?php if (isset($_POST['end_date'])) {echo $_POST['end_date'];}?>" required></input>
Hour: <input type="number" name="end_hour" value="<?php if (isset($_POST['end_hour'])) {echo $_POST['end_hour'];}?>" required></input>
Minute: <input type="number" name="end_minute" value="<?php if (isset($_POST['end_minute'])) {echo $_POST['end_minute'];}?>" required></input>
<br>
</div>

<div>
<input type="submit" value="Go"></input>
</div>
</form>

My PHP then takes it all and changes it into EPOCH and passes the values into the img src (for info there are 3 of these side by side all of which are just for different hosts):

$start_date = strtotime($_POST['start_date']);
$start_hour = $_POST['start_hour'];
$start_minute = $_POST['start_minute'];

$end_date = strtotime($_POST['end_date']);
$end_hour = $_POST['end_hour'];
$end_minute = $_POST['end_minute'];

$start_time = $start_date + ($start_hour*60*60) + ($start_minute*60) + 3600;
$end_time = $end_date + ($end_hour*60*60) + ($end_minute*60) + 3600;

My issue is that when I navigate to my page it fails to load the images because of a 401 error as 'checkstuff.com' (in this case) as basic HTTP authentication. For Firefox I can input the user and pass into the src like this:

<img src="http://user:password@checkstuff.com/livedata/index.php/image?source=0&host=randomhost.com&start=$start_time&end=$end_time&graph_height=150&graph_width=520"></img>

However I use Chrome which tells me that this is depreciated and does not allow the credentials to be passed through. So I have scoured google and found that potentially cURL for php might be ok for me to work with, I put the below on the top of my php file:

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,$URL);
curl_setopt($ch, CURLOPT_TIMEOUT, 30); //timeout after 30 seconds
curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_ANY);
curl_setopt($ch, CURLOPT_USERPWD, $username . ":" . $password);
$result=curl_exec ($ch);
$status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);   //get status code
curl_close ($ch);

To try and authenticate and the images will not load, I get a 401 error in console.

My questions are:

  1. Is this the correct method?
  2. If so, why is cURL not working?
  3. Am I missing something to get this authenticated?

I have tried to google this and found pages on SO that pointed me to cURL everytime and using the code suggested in those posts got me the same results as posted here.

For info: If I navigate to the page requested, in another tab, in the src first and enter the username and password, and reload my page the images load with no issues. Just in case any answers were going to lead me towards the page not working for another reason. Also the PHP server resides on localhost and I am loading page from localhost (XAMPP in Win10) - is this something to do with the server and client being different sessions?