how do i add an image - Using Umbraco and getting started

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Gibran Shah 69 posts 240 karma points

Mar 28, 2019 @ 03:19
0

How do I add an image?
Hello,

I'm confused about how images work. I did the following:

1) On the media page, I create a folder called "limos", and I upload an image of a limo to the limos folder.

2) I go to the content tab, select the "limo service" page, go to the tab where I have my image property, and set it to the limo image I uploaded to the Media/limos folder.

3) I go to the limo service template and type:

@Model.Content.RoverPic

This results in a number (1345) where the image is supposed to be.

So I try this:
```
<div>
    <img src="Media/limos/@Model.Content.RoverPic">
</div>
```
This results in a broken image.

So I try this:
```
<div>
    <img src="Media/limos/RangeRover_215x141.png">
</div>
```
But again, just a broken image.

How do you add an image to your page?
Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Mar 28, 2019 @ 06:03
100
Hi Gibran

You will need to pass the id you get brack from @Model.Content.RoverPic to the Umbraco.TypedMedia() method.

So it should be done like this
```
@{
   var mediaId = Model.Content.RoverPic;
   var mediaItem = Umbraco.TypedMedia(mediaId);
}

<img src="@mediaItem.url" alt="" />
```
You can learn more here https://our.umbraco.com/documentation/Getting-Started/Design/Rendering-Media/

I hope this helps!

/Jan
Copy Link
Gibran Shah 69 posts 240 karma points

Mar 30, 2019 @ 03:03
0
Thanks Jan,

That works with the following minor adjustments:
```
@{
  var mediaId = Model.Content.RoverPic.Id;
  var mediaItem = Umbraco.TypedMedia(mediaId);
}

<img src="@mediaItem.Url" alt="" />
```
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

How do I add an image?