asp.net mvc icon render

Question

I want to show icon that associated with file type. Something like this

But background is black (in firefox and IE), in chrome it is transparent, and its good.

My controller

 public ActionResult GetFileTypeIcon(string fileName)
        {
            var photo = PhotoModel.GetFileTypeIcon(fileName);

            if (photo == null)
            {
                return File(Url.Content("~/Content/Images/nofile.png"), "image/png");
            }

            var stream = new MemoryStream(photo);


            return File(stream.ToArray(), "image/bmp");
        }

I also try to convert icon to png but than quality of image is very bad.

var stream = new MemoryStream(photo);

            var iconStream = new MemoryStream();

            Image.FromStream(stream).Save(iconStream, System.Drawing.Imaging.ImageFormat.Png);

            return File(stream.ToArray(), "image/png");

view (i use devexpress grid)

@Html.DevExpress().GridView(settings =>
{
    settings.Name = "attachmentsGrid";

    settings.Columns.Add(col =>
    {
        col.Caption = "Назва";

        col.SetDataItemTemplateContent(c =>
        {
            ViewContext.Writer.Write("<table><tr><td>");

            //Html.DevExpress().BinaryImage(imageSettings =>
            //{
            //    imageSettings.Width = 16;
            //    imageSettings.Height = 16;
            //}).Bind(PhotoModel.GetFileTypeIcon(DataBinder.Eval(c.DataItem, "_name").ToString())).Render();
            ViewContext.Writer.Write("<img height=\"16px\" width=\"16px\" src=\"" + Url.Action("GetFileTypeIcon", "Photo", new { fileName = DataBinder.Eval(c.DataItem, "_name").ToString() }) + "\" alt=\"image\" />");
            ViewContext.Writer.Write("</td><td>");
            ViewContext.Writer.Write("&nbsp&nbsp");
            ViewContext.Writer.Write(
                 Html.ActionLink(DataBinder.Eval(c.DataItem, "_name").ToString(), "Download", new { Link = DataBinder.Eval(c.DataItem, "_link"), Name = DataBinder.Eval(c.DataItem, "_name") }));
            ViewContext.Writer.Write("</td></tr></table>");
        });
    });

and method thats return image as byte array. RegisteredFileType.ExtractIconFromFile - returns an Icon.

public static byte[] GetFileTypeIcon(string filename)
        {
            try
            {
                byte[] array;
                var fileType = filename.Split('.').LastOrDefault();
                fileType = "." + fileType.ToLower();
                string fileAndParam = (_iconsInfo[fileType]).ToString();

                if (String.IsNullOrEmpty(fileAndParam))
                    return null;

                var icon = RegisteredFileType.ExtractIconFromFile(fileAndParam, false);

                using (var ms = new MemoryStream())
                {
                    icon.ToBitmap().Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);
                    array = ms.ToArray();
                }

                return array;
            }
            catch (Exception)
            {
                return null;
            }

i am change methhod GetFileTypeInfo: now it returns Icon

 var icon = RegisteredFileType.ExtractIconFromFile(fileAndParam, false);
                return icon;

And controller

public ActionResult GetFileTypeIcon(string fileName)
        {
            var photo = PhotoModel.GetFileTypeIcon(fileName);

            if (photo == null)
            {
                return File(Url.Content("~/Content/Images/nofile.png"), "image/png");
            }

            var stream = new MemoryStream();
            photo.ToBitmap().Save(stream, System.Drawing.Imaging.ImageFormat.Png);


            var iconStream = new MemoryStream();

            Image.FromStream(stream).Save(iconStream, System.Drawing.Imaging.ImageFormat.Bmp);

            return File(stream.ToArray(), "image/png");
        }

Now its render good in chrome , firefox, safari and opera, but in die IE IE its not.

Answer 1

It seems like image bolder issue. can you try to add img { border: 0; } to your site.css file to see if it helps?

Answer 2

This is just a shot in the dark, but when you return your image in the first example the mimetype is wrong. You should return "image/png" instead. Bitmaps don't support transparency, which would explain why the icons become non-transparent.