Creating Image link with HTML Helper

Question

I'm trying to create an image link with the HTML helper of Laravel 4. But it seems that isn't really working. I have this line of code

{{ HTML::link("#", HTML::image("img/logo.png", "Logo") ) }}

But that just outputs a strin like this:

<img src="http://localhost/worker/public/img/logo" alt="Logo">

How come.??

Solution 1

You probably will have to:

<a href="#">{{ HTML::image("img/logo.png", "Logo") }}</a>

Because, link() uses entities to escape the title:

public function link($url, $title = null, $attributes = array(), $secure = null)
{
    $url = $this->url->to($url, array(), $secure);

    if (is_null($title) or $title === false) $title = $url;

    return '<a href="'.$url.'"'.$this->attributes($attributes).'>'.$this->entities($title).'</a>';
}

Producing this source code:

"<a href="#">&lt;img src=&quot;http://localhost/img/logo.png&quot; alt=&quot;Logo&quot;&gt;</a>"

Solution 2

I think it's overkill for no reason. I would do:

<a href="#"><img src={{asset('img/logo.png')}} alt="Logo"></a>

If I then need a dynamic link in place of the #, I would do:

<a href="{{URL::to('/')}}"><img src={{asset('img/logo.png')}} alt="Logo"></a>

Try to use html as much as you can.

Solution 3

You could also use html_entity_decode to get your code working

{{ html_entity_decode( HTML::link("#", HTML::image("img/logo.png", "Logo") ) ) }}

Solution 4

HTML helper has been removed from Laravel 5

now you could simple use this

<img src="{{ asset('logo.png') }}" alt="logo">

This asset by default point to public folder of your larval application

View more solutions

Comments

[Pathros]

Excellent! That did the trick for me when trying to use bootstrap's glyphicon such as in {{ html_entity_decode(Menu::item('home','<span class="glyphicon glyphicon-home"></span> Home')) }}

[PeterG]

This seems to be the most "Laravelish" approach? You could also wrap the above code in a custom helper function to clean it up.

[goto]

Thanks Anton and welcome to StackOverflow. Can you explain your answer or add a bit more details? This way your answer will be more usefull for people (and get upvotes)