当我们使用PHP将线上图片资源转换为base64图片编码后,图片编码放在 img src 中可以正常展示,但如果将其放入CSS样式background-image中时,会出现图片不能正常显示问题,此问题是因为网络上的生成代码往往都使用chunk_split对数据进行了处理,使数据中有了换行
chunk_split: 将字符串按指定长度、使用指定字符分隔开来。
当网页源代码为如下图所示时,图片不能正常显示
1、当您使用chunk_split对编码进行了处理时,需处理掉换行符!!代码如下$imgurl = "http://img.******.com/aruXXBYoKMrs.png";
$imageInfo = getimagesize($imgurl); //用于获取图像大小及相关信息
/*
* file_get_contents() 把整个文件读入一个字符串中
* base64_encode 使用 MIME base64 对数据进行编码
*/
$imgStr = chunk_split(base64_encode(file_get_contents($imgurl)));
$baseStr = 'data:' . $imageInfo['mime'] . ';base64,' .$imgStr;
$baseStr = str_replace(' ', '+', $baseStr);
$baseStr = str_replace(array("\r\n", "\r", "\n"), "", $baseStr);//处理数据中换行符
echo '
die;
2、或者直接不使用chunk_split,对代码无影响!!代码如下$imgurl = "http://img.******.com/aruXXBYoKMrs.png";
$imageInfo = getimagesize($imgurl); //用于获取图像大小及相关信息
/*
* file_get_contents() 把整个文件读入一个字符串中
* base64_encode 使用 MIME base64 对数据进行编码
*/
$imgStr = base64_encode(file_get_contents($imgurl));
$baseStr = 'data:' . $imageInfo['mime'] . ';base64,' .$imgStr;
$baseStr = str_replace(' ', '+', $baseStr);
echo '
die;
当查看网页源代码,发现数据已处理为如下图所示时,表示图片已经可正常展示