”;
In this chapter, we will discuss how to add and display images on your website. You can add images to your website and to individual pages when you are developing your website. If an image is already available on your site, then you can use HTML <img> tag to display it on a page.
Display Image Dynamically
Let’s have a look into a simple example by creating a new folder in the project and name it Images and then add some images in that folder.
Now add another cshtml file and Name it as DynamicImages.cshtml.
Click OK and then replace the following code in the DynamicImages.cshtml file.
@{
var imagePath = "";
if (Request["Choice"] != null){ imagePath = "images/" + Request["Choice"]; }
}
<!DOCTYPE html>
<html>
<body>
<h1>Display Images</h1>
<form method = "post" action = "">
I want to see:
<select name = "Choice">
<option value = "index.jpg">Nature 1</option>
<option value = "index1.jpg">Nature 2</option>
<option value = "index2.jpg">Nature 3</option>
</select>
<input type = "submit" value = "Submit" />
@if (imagePath != ""){
<p><img src = "@imagePath" alt = "Sample" /></p>
}
</form>
</body>
</html>
As you can see, the body of the page has a drop-down list which is a <select> tag and it is named Choice. The list has three options, and the value attributes of each list option has the name of one of the images that has been put in the images folder.
In the above code, the list lets the user select a friendly name like Nature 1 and it then passes the .jpg file name when the page is submitted.
In the code, you can get the user”s selection from the list by reading Request[“Choice”]. To begin with, it will see if there is any selection then it will set a path for the image that consists of the name of the folder for the images and the user”s image file name.
Let’s run the application and specify the following url http://localhost:36905/DynamicImages then you will see the following output.
Let’s click on the Submit button and you will see that index.jpg file is loaded on the page as shown in the following screenshot.
If you would like to select another photo from the dropdown list, let’s say Nature 2, then click the Submit button and it will update the photo on the page.
Upload Image
You can display an image dynamically only when it is available on your website, but sometimes you will have to display images which will not be available on your website. So you will need to upload it first and then you can display that image on your web page.
Let’s have a look into a simple example in which we will upload image, first we will create a new CSHTML file.
Enter UploadImage.cshtml in the Name field and click OK. Now let’s replace the following code in UploadImage.cshtml file
@{ WebImage photo = null;
var newFileName = "";
var imagePath = "";
if(IsPost){
photo = WebImage.GetImageFromRequest();
if(photo != null){
newFileName = Guid.NewGuid().ToString() + "_" +
Path.GetFileName(photo.FileName);
imagePath = @"images" + newFileName;
photo.Save(@"~" + imagePath);
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Image Upload</title>
</head>
<body>
<form action = "" method = "post" enctype = "multipart/form-data">
<fieldset>
<legend> Upload Image </legend>
<label for = "Image">Image</label>
<input type = "file" name = "Image" size = "35"/>
<br/>
<input type = "submit" value = "Upload" />
</fieldset>
</form>
<h1>Uploaded Image</h1>
@if(imagePath != ""){
<div class = "result"><img src = "@imagePath" alt = "image" /></div>
}
</body>
</html>
Let’s run this application and specify the following url − http://localhost:36905/UploadImage then you will see the following output.
To upload the image, click on Choose File and then browse to the image which you want to upload. Once the image is selected then the name of the image will be displayed next to the Choose File button as shown in the following screenshot.
As you can see the that images.jpg image is selected, let’s click on the Upload button to upload the image.
”;