20

currently I have a byte array representing my Image in my ViewModel. I display it with the following code:

<img src="@String.Format("data:image/gif;base64,{0}", Convert.ToBase64String(Model.Image))" />

Now I don't want to have a Base64 String in my Source file, but rather a link to a image. Like:

<img src="Images/" + Model.Id"/>

which would return a Image.

How do I write such a method to return a Image link?

2 Answers 2

46

You could define a controller action that will serve the image:

public class ImagesController: Controller
{
    public ActionResult Index(int id)
    {
        byte[] imageData = ... go get your image data from the id
        return File(imageData, "image/png"); // Might need to adjust the content type based on your actual image type
    }
}

and in your view simply point the src property of the img tag to this controller action:

<img src="@Url.Action("Index", "Images", new { id = Model.Id })" />
Sign up to request clarification or add additional context in comments.

3 Comments

The generated file is temporary?
@notsoux, there's no file involved in here. The server is streaming data from the database directly to the client without creating any files. It's up to the client to decide what to do with this stream.
"It's up to the client to decide what to do with this stream." .. well said...:)
11

One way is to add this to a new c# class or HtmlExtensionsclass

public static class HtmlExtensions
{
    public static MvcHtmlString Image(this HtmlHelper html, byte[] image)
    {
        var img = String.Format("data:image/jpg;base64,{0}", Convert.ToBase64String(image));
        return new MvcHtmlString("<img src='" + img + "' />");
    }
}

then you can do this in any view

@Html.Image(Model.MyImageBytes)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.