Dodawanie obrazka w asp.net mvc, a potem wyświetlenie jego na froncie przy użyciu jQuery

Witam,

Tak jak w temacie chciałbym móc do danego produktu dodać zdjęcie. Korzystam z Entity Frameworka. Jakiego typu powinna mieć zmienna w której będzie zapisywany obrazek? Jak to potem wyświetlić na froncie za pomocą jQuery? Dodam, że na frontendzie pobieram cały obiekt i odpowiednio odwołuje się do pól danego obiektu. Jednak pewnie z wyświetleniem obrazka tak łatwo nie pójdzie? Trzeba go będzie na froncie jakoś przekonwertować na inny typ aby poprawnie się wyświetlił?

Nie zapisuj w bazie danych faktycznie obrazka, ale nazwę pliku (np. wygenerowaną losowo), a sam plik przy uploadzie tylko nazywaj inaczej, zapisuj do jakiegoś katalogu (np. dostępnego tylko z kontrolera, a nie z serwera) i kiedy jQuery zażąda pliku to mu go odczytaj i serwuj.

To znaczy możesz mieć specjalną akcję, która tylko dostaje nazwę obrazka, a zwraca bezpośrednio strumień bajtów, na przykład coś w tym stylu:

[Produces("image/jpeg")]
[HttpGet("{imageId}")]
public IActionResult Image(string imageId)
{
    // _appDataHelper to pomocnicza klasa, która mi zwraca ścieżki w których fizycznie pliki są zapisywane
	var path = _appDataHelper.GetPath(Path.Combine("images", imageId + ".jpg"));

	if (System.IO.File.Exists(path))
	{
		return base.File(System.IO.File.ReadAllBytes(path), "image/jpeg");
	}
	else
		return NotFound();
}

Hmm, nie wpadłem na to. Może w takim razie na froncie odczytywać nazwę obrazka i wpisywać ją do src obrazka (img) za pomocą jQuery jeśli taki obrazek został zdefiniowany dla danego produktu?

Możesz. Możesz też to zrobić kompletnie bez jQuery, po prostu generując odpowiednie tagi <img> z wypełnionym atrybutem src.

A czemu odradzałeś przechowywanie obrazka w bazie danych?

Co do przechowywania obrazka w bazie danych: to zależy, jak zwykle nie ma prostych odpowiedzi. Ja zasugerowałem proste i sprawdzone rozwiązanie, ale możesz trzymać pliki bezpośrednio w bazie (w polach BLOB, czy nawet bardziej wymyślnych w MSSQL na przykład w rodzaju FILESTREAM). Też trochę zależy jakie to dane trzymasz w swoich bazach, bo dla niektórych będzie inaczej.

Ogólnie zobacz na przykład tutaj: https://stackoverflow.com/questions/3748/storing-images-in-db-yea-or-nay

1. Storage na bazę danych zazwyczaj jest droższy niż "ogólne" miejsce dyskowe (u dostawców - jeżeli masz własne serwery to to powiedzmy, że nie dotyczy) - zdarzają się dostawcy, którzy dadzą ci bazę tylko o rozmiarze 2 GB, ale 20 GB powierzchni dyskowej bez problemu; jak spojrzysz na przykład na Azure Blob Storage to kosztuje to 0,002€/GB miesięcznie, czyli prawie nic - a Azure SQL kosztuje już rzędu 0,005€ za godzinę (do 2 GB);
2. W momencie, kiedy przechowujesz obrazki w taki sposób, że webserver może się do nich "dobrać" bez problemu może to być zdecydowanie wydajniejsze, bo nie będzie wymagało specjalnej pracy twojej aplikacji, pojawi się keszowanie, można robić CDN-y i inne szaleństwa;
3. Nie lubię, bo baza dla mnie to zbiór uporządkowanych danych, a BLOB to taki... blob ;-)

Ale z drugiej strony trzymanie obrazka w bazie daje ci na przykład:

1. Łatwiejszy backup/restore i replikację;
2. Za jednym zamachem masz rekord i obrazek i jak usuwasz, nie musisz się specjalnie martwić obrazkami;
3. Rollback czy izolację transakcji robi za ciebie baza danych, bez zmartwień.

Więc jest w sam raz jeżeli musisz dbać o spójność danych.

Jeżeli chciałbyś zrobić to samo z trzymaniem obrazka w bazie danych, to rozwiązanie będzie bardzo podobne - wystarczy, że zrobisz akcję, która będzie zwracać strumień bajtów pobrany z bazy danych, a ten strumień (byte[]) będziesz trzymał w bazie. Może być bezproblemowo składową twojego obiektu. A potem w <img src> odwołujesz się tylko do tej akcji.

ok, dzięki wielkie

Przy okazji mam jeszcze jedno pytanie czy jeśli robię aktualnie aplikacje sklepu internetowego to czy jako zdjęcia mogę wykorzystać czyjeś zdjęcia np. z allegro?

?