"impossible to load image" for php generated image inside css/javascript

So in my laravel site I have this code inside a controller:

serveAngledImage($session,$imgId,$angle) {
      [...]

        $maskExists =\Storage::disk('s3')->exists($usrDirectory.$maskFile);

        $maskUrl = \Storage::disk('s3')->temporaryUrl(
            $usrDirectory . $maskFile, now()->addMinutes(12)
        );

        if ($maskExists) {

          $img = Image::make($maskUrl);
          $originalWidth = $img->width();
          $originalHeight = $img->height();
          $img->rotate((-1 * $angle))->crop($originalWidth, $originalHeight)->encode('data-url');
        }
        else {
            $img = null;
        }

        return $img->encoded;

    } 

which is called by this route:

Route::get('/angleImage/{session_id}/{media_id}/{angle}', 'mediacenter@serveAngledImage');

So, if I visit this route using the browser, I get the expected result, an encoded image, and if I modify the code to return an <img> tag with source $img it works perfectly, but when I add it to css (via javascript) as source of a mask, the image is not loaded, and on the webDevelop tools the url is red and there the alert "impossible to load image".

var Mask = '-webkit-mask-image: url(/angleImage/'+this.sh_session+'/'+this.image.id+'/'+back.angle+'); -webkit-mask-repeat: no-repeat;position:absolute;top:0;left:0;display:block;';
                this.style = Mask;

but if I copy paste the link from the css in a new browser tab, it does shoes the encoded image...

via Chebli Mohamed