响应假/占位符图像

时间:2015-11-17 10:12:06

标签: php html css responsive-images

是否可以伪造html中的空图像,其行为与真实图像相同但不存在?

例如,我有一个响应列,其中应该是一个200x150像素的图像(由于其响应而被设置样式:width: 100%; height: auto;)...但是如果没有图像,则应该放置一个占位符,它完全伪造了真实的200x150像素大小的图像尺寸。

我尝试了类似以下的图片代码,但因为height: auto而无效。关于那个奇怪的src看this

<img src="//:0" alt="" width="200" height="150" />

是否可以使用php生成一个空的png?

<img src="fake.php?s=200x150" alt="" />
编辑:有些人提到了服务placehold.it。基本上这正是我需要的(并且在大多数情况下绝对足够),但因为这是一个WordPress插件,它也应该在本地运行而不用互联网连接。 Best是没有外部服务的解决方案。

2 个答案:

答案 0 :(得分:2)

这是我提出的解决方案(这个尺寸的完全透明的图像):

<?php

    // Image size
    $imageWidth = is_numeric( $_GET[ 'w' ] ) ? $_GET[ 'w' ] : 0;
    $imageHeight = is_numeric( $_GET[ 'h' ] ) ? $_GET[ 'h' ] : 0;

    // Header
    header ('Content-Type: image/png');

    // Create Image
    $image = imagecreatetruecolor( $imageWidth, $imageHeight );
    imagesavealpha( $image, true );
    $color = imagecolorallocatealpha($image, 0, 0, 0, 127);
    imagefill($image, 0, 0, $color);

    // Ouput
    imagepng( $image );
    imagedestroy( $image );

?>

也可以用颜色填充图像:

<?php

    // Image size
    $imageWidth = is_numeric( $_GET[ 'w' ] ) ? $_GET[ 'w' ] : 0;
    $imageHeight = is_numeric( $_GET[ 'h' ] ) ? $_GET[ 'h' ] : 0;

    // Header
    header ('Content-Type: image/png');

    // Create Image
    $image = imagecreatetruecolor( $imageWidth, $imageHeight );
    imagesavealpha( $image, true );
    $color = imagecolorallocatealpha($image, 180, 180, 180, 0);
    imagefill($image, 0, 0, $color);

    $text_color = imagecolorallocatealpha( $image, 255, 255, 255, 50 );
    imagestring($image, 1, 5, 5,  $imageWidth . ' x ' . $imageHeight, $text_color);

    // Ouput
    imagepng( $image );
    imagedestroy( $image );

?>

用法是:

<img src="placeholder.php?w=350&h=250" alt="" />

答案 1 :(得分:0)

为什么不使用占位符图像作为透明的1px x 1px png文件,而不是使用php来提供“假”图像?

无论如何,要回答你的问题,你可以使用php服务器图像:

<?php
//redefine the header
header("Content-type: image/png");
//send the image content
readfile('/path/of/a/png/image.png');
?>