Pulling an image into a view is similar to pulling a text element. However, because images are stored as files in a directory, your code will need to reflect the correct path to the image you want to display.

In the CMS environment, images are typically stored in the following directory path:

\\[SERVER]\igxsites\[CMS_SITE]\xml\images

The CMS application looks for image files in this folder, so you don't have to reference the entire directory structure to call an image.

To pull a hard-coded image named image1_big.jpg, you'd use the following line of code:

<img src="image/image1_big.jpg" />

But in most circumstances we don't want to hard-code images. Instead, we want to pull them from the XML, so that they can be updated in the CMS. There are a number of ways to do this.

One method of rendering an image is to use a URL helper in a page view.

Here the URL helper (@Url) uses the Asset method to build a path to an image element set in featuredEventObj.Thumbnail. In this case, featuredEventObj is an anonymous type that encapsulates Thumbnail and other elements to be displayed on an Events Front page. The Thumbnail property gets the value of a Thumbnail attribute in the CMS.

Thumbnail = item.GetAttributeValue("Thumbnail"),

You can also generate images using a partial view. For example, the Detail view uses a RenderPartial helper to display a FeatureImage view.

Html.RenderPartial("Editable/FeatureImage",
Model.Element("FeatureImage"));

The FeatureImage view then provides the markup and display logic for the image.

Here we're passing in the "FeatureImage" element as the model and using it to build a path to the image.