来自Byte []的Asp.Net Mvc加载图像(img src)在javascript中

时间:2013-09-19 15:48:33

标签: javascript jquery asp.net-mvc asp.net-mvc-4 razor-2

我正在使用ASP.Net Mvc4,Razor和javscript / Jquery开发一个应用程序。 我需要显示存储在远程服务器上的图像,这些图像将属于组件“滑块”。

我恢复了远程图像的地址,并将它们存储在带有json的控制器的byte []列表中。 Class ByteImages:

     public class ByteImagenes {
        public byte[] byimagen { get; set; }
        public ByteImagenes(byte[] byImagen) {
            byimagen = byImagen;
        }
     }

动作控制器:

    public JsonResult AlbumFoto(string Directorio){
        var Lista = Galeria(true, Directorio);
        return Json(new { Fotos = Lista });
    }

     private List<ByteImagenes> Galeria(bool Remoto, string Directorio){
        string path = string.Empty;
        DirectoryInfo dir = null;
        List<ByteImagenes> flistImagenes = new List<ByteImagenes>();
        if (!Remoto){
            path = "/" + Directorio + "/";
            dir = new DirectoryInfo(AppDomain.CurrentDomain.BaseDirectory + Directorio);
        }
        else {
            path = Directorio;
            dir = new DirectoryInfo(Directorio);
        }
        FileInfo[] fileList = dir.GetFiles("*.*", SearchOption.AllDirectories);
        var fileQuery = from file in fileList
                        where ((file.Extension == ".jpg") ||
                               (file.Extension == ".png") ||
                               (file.Extension == ".gif") ||
                               (file.Extension == ".jpeg"))
                        orderby file.Name
                        select file;
        foreach (var file in fileQuery){
            var b = System.IO.File.ReadAllBytes(path + file.Name);
            flistImagenes.Add(new ByteImagenes(b));
        }
        return flistImagenes;
    }

在视图中,我在函数javascript中创建我的图库图片。 在这个函数javascript我无法显示图像。 功能javascript:

   function CrearGaleria(data) {
    var elem;
    $.each(data.Fotos, function (key, val) {
        var _ParamImp = val.byimagen;
        var link2 = '@Html.Raw("data:image;base64,@System.Convert.ToBase64String(Param)")';
        link2 = link2.replace("Param", _ParamImp);
        alert(link2);
        elem = "<li><a><img src=" + link2 + " /></a></li>";
        $("#ulImages").append(elem);
    })
    iniciarEfecto();
}

警告(link2)这告诉我: enter image description here

我无法从数组字节加载src中的图像如何解决这个问题?

编辑我可以解决这个问题... 我在byte [] now string

之前更改了我的类
public class Imagenes
{
    public string imagen { get; set; }
    public Imagenes(string sImagen)
    {
        imagen = sImagen;
    }
}

加载我在foreach Convert.ToBase64String的私有List Galeria中更改的值

foreach (var file in fileQuery)
        {
            var b = System.IO.File.ReadAllBytes(path + file.Name);                
            listImagenes.Add(new Imagenes(Convert.ToBase64String(b)));
        }
        return listImagenes;

并在视图中的javascript中:

function CrearGaleria(data) {
    var elem;
    $.each(data.Fotos, function (key, val) {
        elem = '<li><a><img src="data:image;base64,' + val.imagen + '"/></a></li>';           
        $("#ulImages").append(elem);
    })
    iniciarEfecto();
}

现在我可以显示图像了。 : - )

0 个答案:

没有答案