images not appear in the blade page if send it to email by using queue job Laravel?

I send an email to user for verifying, by using queue job after registration, the job run successfully but the (blade page), which sent to the user doesn’t show the images, Although if I sent the blade page without send it by queue job, the images appear fine!?

So the issue is that:

the images in the blade page in the user’s email inbox, doesn’t appear if I sent it by using the queue job, Although if I sent it directly without queue job, it appear fine.

image’URL if I sent it by using queue job:

http://localhost/assets/img/logo.png

image’URL if I sent it without using queue job:

http://localhost:8000/assets/img/logo.png

The Blade Page

    <!doctype html>
<html lang="en"><head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <link rel="stylesheet" href="{{asset('assets/css/bootstrap.css')}}">
      <style type="text/css">
      @import url({{asset('assets/css/style.css')}});

      body {

}
      </style>
    <title>login Page</title>
  </head>
<body>
<section class="row">
    <div class="col col-sm ">
    </div>
  <div class="col col-sm ml-5 pl-5" id="col1" >
    <div class="container">
        <div class="row mt-5 pl-5 mb-5 pb-5">
      <img src="{{asset('assets/img/logo.png')}}" width="80" height="80" alt=""/>
        </div>
        <div class="row mt-5 mb-5 pb-5 ">
      <img src="{{asset('assets/img/Sign in ~ Register Illustration.png')}}" width="263" height="241" alt=""/>
        </div>
        <h1>Hello,  </h1>
        <h2>Verification Code </h2>
        <div class="row mt-5 mb-5 pb-5 pr-5">
        <p class="font-style-normall font-size-18 line-spacing-33 font-family-cairo text-muted" id="text1">1Me will Keep your Contacts Secured in our Data base</p>
        </div>

      </div>

  </div>
    </section>
<script src="{{asset('js/bootstrap.js')}}"></script>

</body>
</html>

JavaScript
​x
 
    <!doctype html><html lang="en"><head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">​      <link rel="stylesheet" href="{{asset('assets/css/bootstrap.css')}}">      <style type="text/css">      @import url({{asset('assets/css/style.css')}});​      body {​}      </style>    <title>login Page</title>  </head><body><section class="row">    <div class="col col-sm ">    </div>  <div class="col col-sm ml-5 pl-5" id="col1" >    <div class="container">        <div class="row mt-5 pl-5 mb-5 pb-5">      <img src="{{asset('assets/img/logo.png')}}" width="80" height="80" alt=""/>        </div>        <div class="row mt-5 mb-5 pb-5 ">      <img src="{{asset('assets/img/Sign in ~ Register Illustration.png')}}" width="263" height="241" alt=""/>        </div>        <h1>Hello,  </h1>        <h2>Verification Code </h2>        <div class="row mt-5 mb-5 pb-5 pr-5">        <p class="font-style-normall font-size-18 line-spacing-33 font-family-cairo text-muted" id="text1">1Me will Keep your Contacts Secured in our Data base</p>        </div>​      </div>​  </div>    </section><script src="{{asset('js/bootstrap.js')}}"></script>​</body></html>​

Route:

    Route::group(['middleware'=>'guest:web'], function(){
    Route::get('/register', [registerController::class,'register'])->name('site.register');
    Route::match(['get','post'],'/register-create', [registerController::class,'create'])->name('site.register.create');
});

JavaScript
 
    Route::group(['middleware'=>'guest:web'], function(){    Route::get('/register', [registerController::class,'register'])->name('site.register');    Route::match(['get','post'],'/register-create', [registerController::class,'create'])->name('site.register.create');});​

Controller:

    public function create(RegisterRequest $request)
{
     $user = User::create([
        'firstName' => $request->firstName,
        'middleName' => $request->middleName,
        'lastName' => $request->lastName,
        'email' => $request->email,
        'password' => Hash::make($request->password),
    ]);
    $on = CarbonCarbon::now()->addSecond(10);
     dispatch(new VerifyEmailJob($user))->delay($on);
    return redirect()->route('landingPage')->with(['success'=>'We sent verifying email check it']);
}

JavaScript
 
    public function create(RegisterRequest $request){     $user = User::create([        'firstName' => $request->firstName,        'middleName' => $request->middleName,        'lastName' => $request->lastName,        'email' => $request->email,        'password' => Hash::make($request->password),    ]);    $on = CarbonCarbon::now()->addSecond(10);     dispatch(new VerifyEmailJob($user))->delay($on);    return redirect()->route('landingPage')->with(['success'=>'We sent verifying email check it']);}​

queue job:

    <?php

namespace AppJobs;

use AppMailVerifyEmail;
use IlluminateBusQueueable;
use IlluminateContractsQueueShouldQueue;
use IlluminateFoundationBusDispatchable;
use IlluminateQueueInteractsWithQueue;
use IlluminateQueueSerializesModels;
use IlluminateSupportFacadesMail;

class VerifyEmailJob implements ShouldQueue
{
    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;

    /**
     * Create a new job instance.
     *
     * @return void
     */
    public $user;
    public function __construct($user)
    {
        $this->user= $user;
    }

    /**
     * Execute the job.
     *
     * @return void
     */
    public function handle()
    {
        Mail::to($this->user->email)->send(new VerifyEmail($this->user));

    }
}

JavaScript
 
    <?php​namespace AppJobs;​use AppMailVerifyEmail;use IlluminateBusQueueable;use IlluminateContractsQueueShouldQueue;use IlluminateFoundationBusDispatchable;use IlluminateQueueInteractsWithQueue;use IlluminateQueueSerializesModels;use IlluminateSupportFacadesMail;​class VerifyEmailJob implements ShouldQueue{    use Dispatchable, InteractsWithQueue, Queueable, SerializesModels;​    /**     * Create a new job instance.     *     * @return void     */    public $user;    public function __construct($user)    {        $this->user= $user;    }​    /**     * Execute the job.     *     * @return void     */    public function handle()    {        Mail::to($this->user->email)->send(new VerifyEmail($this->user));​    }}​

Mail class:

    <?php

namespace AppMail;

use IlluminateBusQueueable;
use IlluminateMailMailable;
use IlluminateQueueSerializesModels;

class VerifyEmail extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public $user;

    public function __construct($user)
    {
        $this->user = $user;
    }
    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        $user = $this->user;
        return $this->subject('Mail from Oneme')
            ->view('site.auth.verifyEmail',compact('user'));
    }
}

JavaScript
 
    <?php​namespace AppMail;​use IlluminateBusQueueable;use IlluminateMailMailable;use IlluminateQueueSerializesModels;​class VerifyEmail extends Mailable{    use Queueable, SerializesModels;​    /**     * Create a new message instance.     *     * @return void     */    public $user;​    public function __construct($user)    {        $this->user = $user;    }    /**     * Build the message.     *     * @return $this     */    public function build()    {        $user = $this->user;        return $this->subject('Mail from Oneme')            ->view('site.auth.verifyEmail',compact('user'));    }}​

Any Help

Answer

I have faced this issue before. For emails all path must be a Fully Qualified URL. Because queue jobs can not smartly figure out what the application’s base url should be.

https://example.com/static/logo.png is a Fully Qualified URL, but /static/logo.png isn’t. For this, I use a APP_URL env key.

When a action is being performed without http request(Like in queue system), laravel can not translate /static/logo.png to https://example.com/static/logo.png

On .env file I’d do something like

APP_URL = "https://example.com"    #change this with your application url

JavaScript
 
APP_URL = "https://example.com"    #change this with your application url​

The on the view file, I’d do something like

<img src={{ env('APP_URL') . '/static/logo.png' }} />

JavaScript
 
<img src={{ env('APP_URL') . '/static/logo.png' }} />​

Advertisement

Answer