«невозможно загрузить изображение» для сгенерированного php изображения внутри css / javascript

Question

Итак, на моем сайте laravel у меня есть этот код внутри контроллера:

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;

    } 

, который вызывается этим маршрутом:

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

Итак, если я посещаю этот маршрут с использованиембраузер, я получаю ожидаемый результат, закодированное изображение, и если я изменяю код, чтобы возвращать тег <img> с источником $img, он работает отлично, но когда я добавляю его в css (через javascript) в качестве источника маскиизображение не загружается, а в инструментах webDevelop URL-адрес красного цвета, и появляется предупреждение «невозможно загрузить изображение».

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;

, но если я скопирую и вставлю ссылку из CSS в новую вкладку браузера, она действительно закодирует закодированное изображение.Hww, если я просто распечатываю данные из вставленной ссылки, это что-то вроде: data: image / png; base64, iVBORw0KGgo ....

Answer 1

Проблема была в части контроллера, более конкретно в коде изображения вмешательства.Я просто заменил:

$img->rotate((-1 * $angle))->crop($originalWidth, $originalHeight)->encode('data-url'); 

на

$img->rotate((-1 * $angle))->crop($originalWidth, $originalHeight)->response('png'); 

и теперь все работает.

Answer 2

Не видя код ... Пути в URL-адресах фонового изображения в CSS являются родственниками пути к файлу, если вы обслуживаете файл CSS из подпапки, вам придется изменить путь URL-адреса.

Если загружен CSS:

<link rel="stylesheet" href="/css/styles.css">

И изображение подается:

http://example.com/images/photo.png

URL должен быть:

background: url('../images/photo.png');