Display image dynamically with ViewBag

Question

I want to display and change a image dynamically in the same view. So I have tried to use the code: Use MVC 3 ViewBag to dynamically change an image

and this: Pass image from controller and display in a view using ViewBag in ASP.NET MVC 3

but didn't work.

Here is my Index.cshtml:

@using (Html.BeginForm("showFile", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{

    @Html.TextBox("ImageID")
    <input type="submit" value="ok" class="submit" />
}

<img src="@ViewBag.Foto" alt="IMAGES" />

My HomeController.cs:

public ActionResult Index()
{
    return View();
}

public ActionResult showFile(string ImageID)
{
    var dir = Server.MapPath("/images/profile");
    var path = Path.Combine(dir, ImageID + ".jpg");
    if (System.IO.File.Exists(path))
    {
        ViewBag.Foto = path.ToString();
    }
    return RedirectToAction("Index", "Home");
}

possible duplicate of [Use MVC 3 ViewBag to dynamically change an image](http://stackoverflow.com/questions/14213182/use-mvc-3-viewbag-to-dynamically-change-an-image) try a google search if all else fails — MethodMan, Dec 01 '14 at 22:40
Take a look at the rendered HTML and make sure it is correct. For example: `` Also check the image exists in the location src. — luke2012, Dec 02 '14 at 01:35

score 1 · Answer 1 · answered Dec 01 '14 at 22:42

1

That's because Server.MapPath will return the physical path to the image, which is not what you want. You will want the server-relative path (/images/profile/xxxxx).

answered Dec 01 '14 at 22:42

Ricardo Peres

13,724
5
57
74

do you mean this? >> In controller: ViewBag.Foto = "~/images/profile/"+ImageID+".jpg"; – Nosc Nosc Dec 01 '14 at 22:49
there is my new code: [my controller](http://pastie.org/9754989), [my view](http://pastie.org/9754990) Tempdata was Displayed "ok"... – Nosc Nosc Dec 01 '14 at 23:06

score 1 · Answer 2 · answered Dec 01 '14 at 22:53

1

I would use "ViewBag.Foto" instead of "@ViewBag.Foto".

The @ sign would be used by razor syntax in a view, but not in a controller.

answered Dec 01 '14 at 22:53

Jordan L. Osier

188
7

Sorry, that was my fault... but the code original is "ViewBag.Foto = path.ToString();" – Nosc Nosc Dec 01 '14 at 22:55

score 1 · Accepted Answer · edited May 23 '17 at 11:50

I believe there are 2 issues with the code sample you have provided.

The first issue is that you are providing a full path to the image tag. You are setting the ViewBag.Foto property with the contents of Server.MapPath() combined with the image so the resulting img tag will look similar to:

<img src="C:\your-local-path-here\images\profiles\image.jpg" alt="IMAGES"/>

But what you actually want is something similar to:

<img src="/images/profile/image.jpg" alt="IMAGES"/>

The second issue is that you are setting the ViewBag property with the image path and then performing a redirect. When you return a redirect to the browser the content of ViewBag is not maintained for the next request to the Index() action.

The controller code could therefore be changed to:

public ViewResult Index()
{
    return View();
}

[HttpPost]
public ViewResult ShowFile(string imageId)
{
    var virtualPath = string.Format("~/images/profile/{0}.jpg", imageId);

    if (System.IO.File.Exists(Server.MapPath(virtualPath)))
    {
        ViewBag.Foto = VirtualPathUtility.ToAbsolute(virtualPath);
    }
    return View("Index");
}

Additionally, you do not need to specify new { enctype = "multipart/form-data" } in your form (see What does enctype='multipart/form-data' mean?).

You are right!! Should be "return View("Index");"!! Thanks so much :) — Nosc Nosc, Dec 02 '14 at 10:42

Display image dynamically with ViewBag

3 Answers3