I have found an answer its a nasty hack but it works

<#assign tmpImg=hyperlinfield[(hyperlinfield?index_of('>')+1)..(hyperlinfield?index_of('/a>')-2)] />
<img src="${tmpImg}" height="50" width="50"/>

@Tim Pilgrim Where did you find this snippet? haha.

@Aria Ghahari I'm ashamed to say I created it. its horrible but I couldn't find another way.

Don't be ashamed. Thats awesome. Thanks for sharing the solution you came up with.

You shouldn't have to do this either you can use

<img src="${hyperlinkfield@url}" height="50" weight="50" />

@creece I did try that but I get the following error.

To do URL encoding, the framework that encloses FreeMarker must specify the output encoding or the URL encoding charset, so ask the programmers to fix it. Or, as a last chance, you can set the url_encoding_charset setting in the template, e.g. <#setting url_escaping_charset='ISO-8859-1'>, or give the charset explicitly to the buit-in, e.g. foo?url('ISO-8859-1').

and when I add the encoding charset it only renders the colourful question mark.