“无法加载图像”用于 css/javascript 中的 php 生成图像答案

【问题标题】："impossible to load image" for php generated image inside css/javascript“无法加载图像”用于 css/javascript 中的 php 生成图像
【发布时间】：2018-11-17 11:30:13
【问题描述】：

所以在我的 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....

【问题讨论】：

你的url参数正确吗？
我敢打赌，或者从 css 复制和粘贴 url 将不起作用。对吗？
你试过把网址放在引号里吗？ url("/angleImage/'+this.sh_session+'/'+this.image.id+'/'+back.angle+'")
我刚试过，但似乎没有任何变化。仍然对“不可能...”保持警惕

标签： javascript css laravel-5 intervention

【解决方案1】：

问题出在控制器部分，更具体地说是在干预图像代码中。我刚换了：

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

与

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

现在一切正常。

【讨论】：

【解决方案2】：

没有看到代码... CSS 上的背景图像 URL 上的路径是相对于文件路径的，如果您从子文件夹提供 CSS 文件，则必须更改 url 的路径。

如果 CSS 已加载：

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

并且图像被提供：

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

网址应该是：

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

【讨论】：