not able to show image

Question

Here is my model

public class MyModel
{
   public System.Drawing.Image    MyImage             { get; private set; }

    public MyModel(System.Drawing.Image myImage)
    {
       this.MyImage             = myImage;
     }
}

Here is my view

@model MyModel
@using MyNamespace.MyModels;           
@{
   ViewBag.Title = "title";
}
<img id="11111"  src="@Model.MyImage" alt="Hello alt text" />

Here is my controller

public class MyController : Controller
{
   public ActionResult Index()
   {
      Image img = GoAndGetImage(55);
       MyModel model = new MyModel(img);
        return View(model);
    }

    private System.Drawing.Image GoAndGetImage(int id)
    {
            // Retrieve bytesArray from sql db, convert to System.Drawing.Image type
    }
}

But I only get to see Hello alt text and not the real image. What am I doing wrong?

Read the generated source. You need to use a `data:` URI, or make a separate HTTP request. — SLaks, Dec 12 '13 at 21:44

score 2 · Answer 1 · edited May 23 '17 at 10:32

You're trying to pass in an actual physical bitmap from memory.. into the page. This won't work.

You need to either:

a) Pass in a string path to the file. I.e:

this.MyImage = "/your/path/to/file.jpg";

...and...

src="@Model.MyImage"

b) Base64 encode the image and dump that to the page:

this.MyImage = base64String(ImageObject);

...and...

src="data:image/jpeg;base64,@Model.MyImage"

Either way.. MyImage must be a string.

Here is an example of converting an in-memory image to base64: Converting image to base64

I will caution you from loading images from a database constantly. You'll quickly see your working set skyrocket if you have lots of users on your site. Its best to have the database as a lookup.. then check if the files exists on the file system. If it does, use the file on the file system. If it doesn't.. read it from the database and write it to the file system. Then you can continue loading that particular file from the filesystem in future.

I believe there are browser restrictions with the second solution. Also the image is not cached. He's better off going with the first one. — Reza Shirazian, Dec 12 '13 at 21:50
The list of browsers that don't support it are pretty small these days. Unless the requirement is to support really old browsers, it should be fine. — Simon Whitehead, Dec 12 '13 at 21:52

score 1 · Accepted Answer · answered Dec 12 '13 at 21:45

1

The src attribute has to be a URL pointing to the location of the image file, not an object of type System.Drawing.Image.

Change your MyImage property type to String, set it to a relative (or absolute) path to where the image file is located and see if it works.

answered Dec 12 '13 at 21:45

Daniel Gabriel

3,939
2
26
37

i am just reading this image from database; so its not in a file located on file system – crazy novice Dec 12 '13 at 21:47
If it's stored in a blob in the database, you will most likely have to save it as a file before you will be able to display it. See the answer by @Simon - you may be able to display it without saving. – Daniel Gabriel Dec 12 '13 at 21:48

not able to show image

2 Answers2