C# API pole obrázků do JS – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Ahoj, mám v C# API [GET], kde stahuji obrázek z SQL a převádím na objekt třídy Image a vracím pole[] těch obrázků, poté chci zobrazit obrázky v JS a uložit do local storage a poté s nimi pracovat, ale obrázky se nezobrazují, protože v src obrázků je pouze [object Object]. Jak lze extrahovat jednotlivé obrázky z pole?

 API C#

        try
        {
            List<Image> photoList = new List<Image>();
            sqlConnection.Open();
            byte[] imgArray;
            Image fullImage;
            dr = command.ExecuteReader();
            int i = dr.FieldCount;
            if (dr.HasRows)
            {
                while (dr.Read())
                {
                    imgArray = (byte[])dr["Image"];
                    fullImage = ByteArrayToImage(imgArray);

                    photoList.Add(fullImage);
                }
            }
            Image[] imagesArray;
            imagesArray = photoList.ToArray();
            return imagesArray;
        }

AJAX REQUEST

$.ajax({
    type: 'GET',
    url: '/api/fileupload/download' + "?" + "name=" + name,
    timeout: 0,
    success: function (response) {
        console.log(response);
        for (var i = 0; i < response.length; i++) {
            console.log(response[i]);
            var Img = document.createElement('img');
            Img.src = response[i];
            parent.appendChild(Img);
        }
    },
    error: function (err) {
        console.log(err);
    }
})

Máš tam console.log, tak vidíš, co ti v té odpovědi přichází. Zjevně je to objekt a ten do img.src prostě nedáš. Tak holt to při příjmu zpracuj podle toho, jak to formátuješ při odesílání.

console.log(response[i]);  //  pokud to tady pise [object Object]
Img.src = response[i]; // tak to do img nedas

console.log(JSON.stringify(response[i])); // takze se podivej, jak ten objekt vypada, zobraz si to na obrazovku

// nebo do souboru
'/api/fileupload/download' + "?" + "name=" + name,
To presmeruj v tom c++ do souboru a spoust z cmd.

Jakoze, kde v tom objektu mas src obrazku. Src obrazku je to, co se zobrazi pri prihlizeni souboru obrazek.jpg jako zdrojovy kod. Pripadne se to da jeste prepsat pomoci base64 do toho js.
google = jpeg base64 javascript 

var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);

---

var url = document.getElementById('myImg').getAttribute('src')
var xmlHTTP = new XMLHttpRequest();
xmlHTTP.open('GET', url, true);
xmlHTTP.responseType = 'arraybuffer';
xmlHTTP.onload = function(e) {
  var arr = new Uint8Array(this.response);
  var raw = String.fromCharCode.apply(null,arr);
  var b64 = btoa(raw);
  var dataURL="data:image/png;base64," + b64;
  console.log(b64)
};
xmlHTTP.send();

#4 peter
Tak jsem zkoušel to první nevím kde získat tu hodnotu pro src, zkoušel jsem to vyselectovat pomocí objektu  

JSON.parse(response[i])

a pak .value ale nic, i tu druhou metodu jsem zkoušel, ale ta mi prostě nepřidá to b64, já ty obrázky totiž neposílám v binary-date ale rovnou už převedené na Image, takže bude lepší do dát do array v binaray-date?

#3 peter

 JSON ukáže tohle (vybrán jeden objekt)

console.log(JSON.stringify(response[i]))

https://i.postimg.cc/…kc/image.png

Nakonec "nejspíš" vyřešeno změnou v C# převodem byte[] na string64, a vložení do List <string>, děkuji za to base64 a pomoc  

string imgString = Convert.ToBase64String(imgArray);

Njn, kdyz ty mu davas takhle komplexni objekt, to se pak neni cemu divit :) Zkus tam dat

console.log(response[i].propertyitems[0].value) // nebo
console.log(JSON.stringify(response[i].propertyitems[0].value))

Jinak, podle obrazku to vypada, ze to mas prekodovane na base64. Do src by to mozna fungovalo

img.src = "data:image/jpeg;base64," + response[i].propertyitems[0].value;
// ale, to neni jiste, by se muselo zkusit

Kazdopadne, jak pises, zmenil jsi vystup, to je lepsi reseni.