PHP在CSS/javascript中生成的图像“无法加载图像”怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (97)

在我的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)作为掩码的源时,图像不会被加载,而且在webDe信封工具上,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中粘贴链接的话,它确实会显示编码的图像。 如果我只是从粘贴的链接中输出数据,它是这样的:data:image/png;base64,iVBORw0KGgo....

提问于
用户回答回答于

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

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

带着

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

现在一切都正常了。

用户回答回答于

没有看到密码.。CSS上的背景图像URL上的路径与文件的路径相关,如果您从子文件夹中为CSS文件提供服务,则必须更改url的路径。

如果加载了CSS:

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

这张照片是:

http:/example.com/Image/Photo.PNG

网址应为:

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

扫码关注云+社区

领取腾讯云代金券