In the Umbraco Admin Panel, how do I use an image in Partial View?

Question

I'm able to upload images in the Media section in the admin panel. My question is: how do I use an updated image in a Partial View? I'm not asking about doing it programmatically. I have a very simple Partial View - code below:

<div>
    <p style="text-align:center">Heading here</p>   
    <img/>  
</div>

Please note that is all the code of the Partial View.

After uploading, I just want to add an image tag. The image name and ID will be available. Is there a way I can configure a wizard to select the image ?

If I have to do it manually by writing HTML, can you please share a sample of the required HTML image tag?

Answer 1

I'm afraid I've misunderstood something as the answer almost seem to simple. If you don't mind writing manual HTML after you've uploaded and you don't want to do it programatically, you can find the url of the published image in the properties tab of the image media node. Just put that in in

<img src="urlHere"/>

Answer 2

If I understood you correctly, you want to link to an image from your media library in your partial view. If you have the image id, then you could simply do something like:

<img src="@Umbraco.Media(imageId).umbracoFile"/>

where "imageId" is the id of the image.

If you want to have it more configurable from your backoffice, you could add a property to your document type like "headerImage" and set the type of the property to "MediaPicker". When you create a document of that type, you are now able to choose an image from your media library and assign it to the "headerImage" property. To integrate this in your partial view, just access the image via the document property in your razor code:

@{
    var imageId = @CurrentPage.headerImage;
    var imageSource = @Umbraco.Media(imageId).umbracoFile;
    <img src="@imageSource"/>
}