Read Binary Image from database using c# in ASP.NET

Question

I need to retrieve a binary image from the database and dispaly it in my orgchart.

i use Entity framework, I recovered my data, but I got my binary image like urls and of course it gives me an error as you see in the image. error URl 414

It takes the binary image as a url and of course gives me the error 414 My queries are as below:

public JsonResult Read()
{
   var nodes = (from s in entities.AGENT
                from u in entities.UNITE_ORG
                from f in entities.PHOTO
                where s.MATRICULE ==  u.RESPONSABLE && f.MATRICULE==s.MATRICULE
                select new NodeModel() { 
                   id= u.UO,
                   pid= u.UO_RATTACHEMENT,
                   responsable = u.RESPONSABLE,
                   matricule = s.MATRICULE,
                   nom= s.NOM,
                   prenom= s.PRENOM,
                   img= f.PHOTO1,
                   poste=u.POSTE,
                });

   return Json(new { nodes = nodes }, JsonRequestBehavior.AllowGet);
}

public class NodeModel
{
   public string id { get; set; }
   public string pid { get; set; }
   public string responsable { get; set; }
   public byte[] img { get; set; }
   public string nom { get; set; }
   public string prenom { get; set; }
   public string poste { get; set; }
   public string matricule{ get; set; }
}

this is my script :

 <script>




    $.get("@Url.Action("Read")").done(function (response) {

        var chart = new OrgChart(document.getElementById("tree"), {
            template: "diva",
            layout: OrgChart.mixed,
            menu: {
            pdf: { text: "Export PDF" },
            png: { text: "Export PNG" },
            svg: { text: "Export SVG" },
            csv: { text: "Export CSV" }
        },

            nodeBinding: {

               field_0: "nom",
               field_1: "prenom",
               field_2:"poste",
               img_0: "img"
            },
             nodeMenu: {
            details: { text: "Details" },
            edit: { text: "Edit" },
            add: { text: "Add" },
            remove: { text: "Remove" }
        },
            nodes: response.nodes

        });
          document.getElementById("selectTemplate").addEventListener("change", function () {
    chart.config.template = this.value;
              chart.draw();

});
    });
</script>

Now i need to read the pictures the right way, maybe i need to convert binary to other things but i don't know which one.

thank you !

So are you returning the binary data directly to the client? What does your client-side code look like where you're attempting to display this? What does the client-side JSON object look like? — stjns, Mar 04 '20 at 16:04
The images have to be encoded somehow. It's likely .png or .jpg - You need to take the byte data and render an image from it. https://stackoverflow.com/questions/20756042/how-to-display-an-image-stored-as-byte-array-in-html-javascript — Zakk Diaz, Mar 04 '20 at 16:05
You can pass the binary data as URI or you can create object URIs: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs, https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL — Christoph Lütjen, Mar 04 '20 at 16:08
The images are binaray and to send as http you need to Convert to 64 bit string. — jdweng, Mar 04 '20 at 16:15

Read Binary Image from database using c# in ASP.NET

0 Answers0