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>的{{1}}标记，则它可以完美地运行，但是当我将它添加到css（通过javascript）作为掩码的源时，图像没有被加载，并且在webDevelop工具上，url是红色的，并且警报＆＃34;无法加载图像＆＃34;。

$img

但如果我在新的浏览器标签中复制粘贴来自css的链接，它会对编码图像进行修改。嗯，如果我只是打印出粘贴链接中的数据，它就像：data：image / png; base64，iVBORw0KGgo ....

Answer 1

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

如果加载了CSS：

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

提供图像：

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

网址应为：

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

Answer 2

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

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

带

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

现在一切正常。

＆＃34;无法加载图片＆＃34;用于php生成的图像在css / javascript中

2 个答案: