Laravel使用HTML :: image作为背景图像

Question

how to use HTML::image() for inline styled with background-image such as this html tags:

this line is into my main.blade.php file and that is main skeletion of my template.

<div style="height: 45px;background-image:url('../public/images/header_pattern2.png');border-radius: 5px;position:relative">

in main.blade.php my page view correct template. but after redirect such as login.blade.php images do not show. but after switch to index i do not have a problem.

in public directory i have images , js , css folders and my public is this:

'public' => __DIR__.'/..',

i can remove public directory. how to convert background-image:url('../public/images/header_pattern2.png'); to blade HTML::image() tag?

Answer 1

You may try this:

<div style="height: 45px;background-image:url('{{ asset('images/header_pattern2.png') }}');border-radius: 5px;position:relative">

Update:

Actually, HTML::image() generates an <img /> tag and you are using a div, if you want to use this using HTML::div() then you may create a custom macro .

Update: I've created this custom macro :

/**
 * Param $attr : An array of styles
 * Param $html : HTML content for div
 * Returns HTML DIV
 */
HTML::macro('divWithBG', function($attr = array(), $html = ''){
    $style = 'style = ';
    foreach ($attr as $key => $value) {
        if($key == 'background-image') $style .= $key.':url(\'' . $value .'\');';
        else $style .= $key . ':' . $value .';';
    }
return "<div $style >$html</div>";
});

You may use it in blade view as:

{{ HTML::divWithBG(array('background-image' => asset('images/8_big.jpg'), 'height' => '45px', 'border-radius'=>'5px', 'position'=>'relative' )) }}

Output:

<div style="background-image:url('http://blog.dev/images/8_big.jpg');height:45px;border-radius:5px;position:relative;"></div>

Rendered Output:

Answer 2

Use the following function to solve it. This is assuming that the image exist.

public function inline($path)
{      
    $filetype = File::type( $path );
    $response = Response( File::get($path), 200 );
    $response->header('Content-Type', $filetype);
    return $response;
}

Answer 3

我尝试了这个并且有效

 background: url('{{asset('uploads/avatars/'.$employee->avatar)}}')