How to place website logo and identity image design on the very top of email sent via phpmailer to gmail - phpmailer

Question

[enter image description here][1]I am sending a password recovery mail and i used table html tag for cross-platform support. I put the image in the right position in the mail, which is at the top. But the image was placed below the message as attachment without the css style and not within the table row on top of the page. How do ensure the image is placed at the top not bottoom inside gmail?
I used phpmailer AddEmbeddedImage('../../img/kokwo_full.png', '{$site}', '{$site}.png').
$subject="Password Reset Request - {$site}";
$message="
<table width='100%' style=' background:#f2f2f2; margin:0px; margin:0px 0px; color:#fff; font-family: Arial, sans-serif; font-size:12px; font-weight:bold; padding:0% 2%'>
<tr style='background:#fff;'>
<td colspan='2'><img src='{$http}://{$website}/img/kokwo.png' style='background:#4885ed; height:60px'/></td>
</tr>
<tr style='height:140px;'>
<td colspan='2' style='color:#000;text-align:center; font-size:32px'> </td>
</tr>
<tr>
<td colspan='2' style='color:#000;text-align:center; font-size:32px; border-bottom:1px solid #000'> Hi {$user_name},</td>
</tr>
<tr style=' height:90px;'>
<td colspan='2' style='color:#000; font-size:18px'>Instant password change
<p style='color:#000; font-size:10px'>{$email}</p></td>
</tr>
<tr style=' color:#808080; '>
<td colspan='2' style='color:#808080; font-size:18px'>Click on this button</td>
</tr>
<tr style=' height:30px;'>
<td colspan='2' style='text-align:center;'>
<form action='{$http}://{$website}reset' method='post' class='regi' enctype='multipart/form-data'>
<input type='text' name='user_id' value='{$user_id}' style='display:none;'/>
<button type='submit' style='background:#00A9E0; color:#fff; padding: 10px;
font-size: 18px;
border: none;
border-radius: 5px;
width: 89%;
margin:25px 3%' name='reg_user' >Change your password on ".ucwords($site)." </button>
</form>
</td>
</tr>
<tr style='height:80px;'>
<td colspan='2'> </td>
</tr>
<tr style='height:30px; background:#4885ed;'>
<td colspan='2'></td>
</tr>
</table>
";
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
if (isset($_POST['reset-password'])) {
require '../../PHPMailer/src/Exception.php';
require '../../PHPMailer/src/PHPMailer.php';
require '../../PHPMailer/src/SMTP.php';
$mail = new PHPMailer();
$mail->IsSMTP();
$mail->Host = "mail.{$site}.com"; // "ssl://smtp.gmail.com" didn't worked
$mail->SMTPAuth = true;
$mail->IsHTML(true); // if you are going to send HTML formatted emails
$mail->Username = $my_mail;
$mail->Password = $my_password;
$mail->From = $my_mail;
$mail->FromName = $fromname;
$mail->addAddress($email, $user_name);
$mail->addReplyTo($my_mail, $fromname);
$mail->Sender=$my_mail;
//Provide file path and name of the attachments
$mail->Subject = $subject;
$mail->AddEmbeddedImage('../../img/kokwo_full.png', '{$site}', '{$site}.png');
$mail->Body = $message;
$mail->AltBody=$subject;
$mail->Send();
if (!$mail) {
array_push($errors, "<div class='error'><p>
Could not be delivered to {$email},please try again
.</p></div>");
} else {
array_push($errors, "<div class='success'><p>
Check inbox or spam folder at {$email}.</p></div>");
}
}
```what i want to achieve[What I got][2]
[1]: https://kokwo.com/img/stack/real.jpg
[2]: https://kokwo.com/img/stack/fake.jpg

Answer 1

You have attached it as an embedded image, but you're not actually using it in your template.
The second parameter to addEmbeddedImage is cid, a content identifier. A separate problem is that you have single-quoted your strings, so no variable interpolation will be done - that's probably not what you intended.
So if your call looks like this:
$mail->addEmbeddedImage('../../img/kokwo_full.png', 'kokwo', 'kokwo.png').
you would use that image in your HTML like this:
<img src="cid:kokwo" style="background:#4885ed; height:60px">
Note that the string after the cid: part of the URL exactly matches the cid value you passed to addEmbeddedImage.