In questo articolo vedremo come gestire le immagini per visualizzarle in una pagina web, in particolare con la tecnologia Asp.Net Core MVC Framework 3.1 con il linguaggio di programmazione C# e l’ambiente di sviluppo Microsoft Visual Studio Community 2019.
Supponiamo di avere delle immagini e che vogliamo visualizzarli a video, in questo articolo al lettore verranno illustrate alcune tecniche di come visualizzare l’immagine sia mappando il percorso, e quindi passare percorso e nome file, e sia passando il valore dello streaming dei dati, ossia l’array del byte dell’immagine.
Creazione del progetto
Si crea un nuovo progetto di tipo web, selezionando tra i modelli preposti quello relativo ad Asp.Net Core e successivamente MVC.
Dopo aver dato un nome al progetto ed un percorso, avremmo la soluzione con il progetto appena creato.
Come Framework di .Net Core selezionare la versione 3.1 oppure quella più recente che avete installato.
Dopo la creazione del codice tramite la finestra “Esplora soluzioni” che si trova sulla destra, si crea una nuova cartella, che chiameremo “Immagini” al quale andremo ad inserire una serie di immagini, questa cartella andrà creata sotto alla voce “wwwrooot”. In questo modo predisponiamo in questa cartella i file immagini di nostro interesse.
Stesura del codice
Dopo aver aggiunto una serie di immagini, vanno bene anche 6 file, nella cartella immagini scriviamo il codice per visualizzare l’immagine grafica, in particolare supponiamo che vogliamo visualizzare l’immagine denominata “immagine.jpg” vediamo come visualizzarla.
Nelle View, ed in particolare nella pagina Index.cshtml che si trova nella cartella “Home” scriviamo nel codice html, la seguente istruzione.
<img class="img" src="@Url.Content("/Immagini/immagine.jpg")" />
Questo codice carica l’immagine presente nella cartella immagini e visualizza il file denominato Immagine.jpg.
Nel caso che il file si trovava nella root del sito, avremmo lasciato solo il simbolo dello Slash “/”, qui di seguito un esempio.
<img class="img" src="@Url.Content("/immagine.jpg")" />
Nel caso che invece vogliamo visualizzare tutti i file immagini presenti nella cartella Immagini, dovremmo fare un ciclo estrapolando tutti i file e visualizzarli.
Qui di seguito si riporta il frammento di codice sempre nel file index situato nella cartella HOME.
Index.cshtml
@{
string cartella = Environment.CurrentDirectory;
var risultato = System.IO.Directory.EnumerateFiles(@cartella + "\\wwwroot\\Images");
foreach (var image in (IEnumerable<string>)risultato)
{
string NomeFile = System.IO.Path.GetFileName(image);
<img class="img" height="100px" width="100px" src="@Url.Content("/Images/"+NomeFile)" />
<br />
}
}
Come si è visto nel frammento di codice precedente, si effettua una ricerca di tutti i file presenti nella cartella “Immagini” e la si visualizza, tramite il tag html Img.
Un’altra tecnica è quella di visualizzare nel tag Img del codice Html l’immagine tramite lo stream dei dati, ossia tramite array di byte.
Può capitare che in alcune circostanze, dovremmo visualizzare queste immagini da stream.
In questo caso, vedremo come nel metodo “Index” del controller, passeremo l’array dei byte che verrà passato tramite viewbag .
Nel file Controller denominato HomeController, andremo a scrivere il codice per passare l’array di byte di un file immagine che abbiamo nella cartella “immagini”.
HomeController.cs
public IActionResult Index()
{
byte[] arrayByteImmagine = System.IO.File.ReadAllBytes(Environment.CurrentDirectory + "\\wwwroot\\Immagini\\immagine.jpg");
ViewBag.Immagine = arrayByteImmagine;
return View();
}
Come si è visto del precedente codice, nel metodo Index che riguarda il metodo che viene eseguito al caricamento della pagina, si crea una proprietà del ViewBag denominata Immagine, che contiene l’array dell’immagine.
Mentre nel file view andremo a visualizzare tale valore nel tag img.
Qui di seguito il frammento di codice.
Index.cshtml
<img src="data:image;base64,@Convert.ToBase64String(ViewBag.Immagine)" />
Il valore presente nella proprietà “Immagine” che è un array di byte viene convertito in base64 in modo che si può visualizzare nel tag Img.
In quest’ultimo esempio che vedremo qui di seguito, illustra una tecnica di come visualizzare l’immagine tramite una “Action”, miscelando gli esempi precedenti.
Ritornando nel file controller denominato HomeController, scriviamo una funzione che restituisce un oggetto di tipo file result. Qui di seguito il frammento di codice per il codice C#.
HomeController.cs
[HttpGet]
public IActionResult GetImmagine()
{
byte[] arrayByteImmagine = System.IO.File.ReadAllBytes(Environment.CurrentDirectory + "\\wwwroot\\Immagini\\immagine.jpg");
FileResult imageUserFile = File(arrayByteImmagine, "image/png");
return imageUserFile;
}
Mentre nella parte view, nel file Index andremo ad impostare il tag che richiama questa funzione.
<img src='@Url.Action("GetImmagine")' />
Conclusioni
L’articolo ha voluto fornire al lettore alcune tecniche per visualizzare in una pagina Asp.Net Core MVC delle immagini situate in un determinato percorso del proprio sito web.
Tecniche che possono tornare utile anche in vari contesti e con architetture su vari livelli e tramite l’uso di servizi.
Per coloro che in passato hanno utilizzato il codice Html e codice C# per web form non troveranno difficoltà a comprendere tali frammenti di codice.