UMBRACO: How to add image on template - umbraco

Question

So, I'm currently new to Umbraco and I'm following some tutorial videos on umbraco.tv. I have created my template and is currently using it to setup the Home Page for my website. I have all the front end working and its displaying properly.
My problem is on the images. I'm using a lot of images for my website and I'm trying to link it to content so the images can be easily changed(not sure if I'm making sense).
Navigation bar image
If you click the link above, that's how my current navigation bar look like. I want to be able to change the LOGO using Umbraco's media picker. However, everytime I do so, it either gives me the alt name or a runtime error.
This is the code for the image on the template.
<img src="#Umbraco.Field("navigationLogo")" height="100" width="50" alt="Logo">
I'd appreciate it if you can help me. I'm not sure if I've explained it properly so feel free to ask in detail. Thanks!
Edit -----
I am only coding on browser since it doesn't allow me to login to pull the codes locally (only on trial version since I'm just testing out if its a good CMS).
Not sure if I'm doing it correctly so I apologize. I wrote my code like this
#{
var navigationLogo = #Umbraco.AssignedContent.Site().GetPropertyValue("navigationLogo");
var navigationLogoMediaItem = #Umbraco.TypedMedia(navigationLogo);
<img src="#navigationLogoMediaItem.Url" height="100" width="50" alt="Logo" />
}
It's giving me the following error so far.
Compiler Error Message: CS1061: 'Umbraco.Web.UmbracoHelper' does not contain a definition for 'AssignedContent' and no extension method 'AssignedContent' accepting a first argument of type 'Umbraco.Web.UmbracoHelper' could be found (are you missing a using directive or an assembly reference?

Answer 1

#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = "WebBase.cshtml";
string navigationLogoMediaItem = "";
if (Model.Content.HasValue("navigationLogo"))
{
navigationLogoMediaItem = Model.Content.GetPropertyValue<IPublishedContent>("navigationLogo").Url;
}
}
<img src="#navigationLogoMediaItem" height="100" width="50" alt="Logo" />
you can try this

Answer 2

I'm going to make a few assumptions so please bear with me here.
Assumption 1) On your home node (assuming a document type of 'home") you have a property on it called "navigationLogo".
Assumption 2) This is a media picker data type
Assumption 3) You are using Umbraco 7.6 or newer.
Assumption 4) You aren't using Models Builder
So, assumptions in place there are a few steps you need to go through.
1) Get the navigation logo where ever you are in the site.
var navigationLogo = #Umbraco.AssignedContent.Site().GetPropertyValue("navigationLogo");
2) next, you'll need to get the media item as I belive you will only have a UDI at this stage.
var navigationLogoMediaItem = #Umbraco.TypedMedia(navigationLogo);
3) You'll want to put a null check in at this point but to get the url of the logo you simple need to do this:
<img src="#navigationLogoMediaItem.Url" height="100" width="50" alt="Logo" />
That should get you what you are after. :-)

Answer 3

You can simply try out this code.
memberImage is your document type field name
#{
var image = Umbraco.TypedMedia(#Umbraco.Field("memberImage").ToString());
<img src="#image.Url" style="max-width:250px">
}