css/javascript中php生成的图像“无法加载图像”
css/javascript中php生成的图像“无法加载图像”
提问于 2018-06-07 21:56:12
所以在我的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...
回答 2
Stack Overflow用户
发布于 2018-06-07 22:59:16
看不到代码..。CSS上的背景图像url上的路径与文件的路径相关，如果您从子文件夹中提供CSS文件，则必须更改url的路径。
如果加载了CSS：
<link rel="stylesheet" href="/css/styles.css">然后提供镜像：
http://example.com/images/photo.png
url应为：
background: url('../images/photo.png');Stack Overflow用户
发布于 2018-06-08 05:15:54
问题出在控制器部分，更具体地说是在干预图像代码中。我刚刚替换了：
$img->rotate((-1 * $angle))->crop($originalWidth, $originalHeight)->encode('data-url'); 使用
$img->rotate((-1 * $angle))->crop($originalWidth, $originalHeight)->response('png'); 现在一切都正常了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50743099
复制相关文章
相似问题
腾讯云开发者
