**#26 Project using Spring | Fetching Image — Transcript & Summary | SozAI**
Source: https://sozai.app/transcript/spring-project-fetching-image/

Telusko's Spring project tutorial (#26) fixes image and stock display bugs in a product UI, adds a REST endpoint returning product image bytes with content type, and demos adding products to verify th

## Key Takeaways

- Front end and back end field names must match exactly, or data such as description and stock will fail to display.
- Spring can serve binary image data by returning ResponseEntity with an appropriate Content-Type header.
- Sending the content type alongside image bytes lets the browser render the image correctly.
- A full-stack flow works when the front end calls a dedicated REST API endpoint that returns the data it needs.

## What the video covers

- The video begins by noticing that product images do not display on the home page and product detail view, and that products still show as out of stock.
- The stock and description bugs are traced to a naming mismatch between the front end and back end (the field 'disk' was used instead of 'description').
- The presenter plans to rename fields such as description, available, stock quantity, release date, price, and category to keep the front end and back end consistent.
- A new GET endpoint is created in the controller at a product/{id}/image style URL, returning a ResponseEntity.
- The method fetches the product via the service layer by ID, then retrieves the image data bytes from the product.
- The response sets HTTP status OK, the content type from the product's stored image type using MediaType.valueOf, and the image bytes as the body.
- After restarting the application, a new product 'Galaxy M' (Samsung, $500, stock 5) is added, and its image and description now display correctly.
- A second product, 'Sports Shoes' from Nike, is added to confirm the list shows multiple products.
- The presenter notes that the add-to-cart button works and that the remaining CSS layout issues are a UI concern rather than a backend one.
- The video notes a limitation: the code does not yet check whether a product already exists or handle requests for non-existent IDs, which could be addressed with exception handling.

## Chapters

1. 00:00 Identifying the image and stock display bugs
2. 00:54 Fixing field name mismatches between UI and backend
3. 01:47 Creating the image fetch endpoint in the controller
4. 02:59 Returning image bytes with content type in ResponseEntity
5. 04:41 Testing: adding products and verifying images display
6. 06:37 Adding a second product and wrap-up

Answers

## Questions about this video

Why was the product image not displaying in the UI?

The backend had no endpoint serving the image bytes for the product URL. The presenter adds a GET mapping that fetches the product, retrieves its image data, and returns it with the content type so the browser can render it.

Why did the stock and description show as empty or out of stock?

The front end and back end used mismatched field names, such as 'disk' instead of 'description'. Aligning the names in both layers fixed the display.

What improvement does the presenter suggest for the endpoint?

The endpoint does not check whether the product exists before sending data. The presenter suggests handling a missing ID with try/catch or similar error handling to avoid errors.

## Full Transcript — Download SRT & Markdown

00:00

Speaker A

so now let's work with that image part so in the UI where is the UI where is the UI in the UI when I click on home you can see the image is not coming here and even if I go inside it's not working

00:13

Speaker A

and apart from this there were multiple issues the first one is it's still showing out of stock so we'll solve that and I think I know the problem in the description also we were getting that empty right so if I click on here

00:25

Speaker A

there's no description we have enter the description also it is not showing the stock is because in the UI and in the in the back end there's a name issue so name is same brand is same description what we are using is only uh the dis

00:42

Speaker A

disk not description so if I change this I think it will affect some somewhere else I'm not sure uh but I think I have to change that in the front end yeah so I have to change it everywhere so I know

00:54

Speaker A

the problem you will solve this I know uh so in your code uh in the back end change this uh names or maybe I will just change that fast okay what I will do is I will just go back to the product

01:06

Speaker A

now since we are making this mistake from start so let's resolve it description what is what available it's product available stock quantity what else was there stock quantity product available release date and there was one more issue description price

01:23

Speaker A

category yeah I think these are the only issues okay but if I change this I think I have to change somewhere else as well in this surve this anywhere we are using it no good in repo also no change in the

01:35

Speaker A

controller also no change okay looks good so those are the things things we have to change and now let's work with the image so in the controller uh we have to work for that URL right so which URL I'm talking about is in the home

01:47

Speaker A

this URL so product slash I just copy this this is what you want to work on so let's go back to our code and create a method for this or create a mapping for this so it's public and we are going to

01:59

Speaker A

return the response response entity in the entity the type will be bite AR because we're going to send the image right bite add and it will say get image by product ID because that's where we are going to pass

02:14

Speaker A

because the mapping is get mapping in the URL this is the URL right so instead of saying product ID I will simply say ID or maybe product ID will look good why there's a mistake here okay so let's

02:27

Speaker A

complete this method now and there was a issue with the method name and here we have to accept the name so I will say product V product path variable uh integer product ID and let's work with this now how will you get the image so

02:40

Speaker A

of course the image will be coming in the product itself right so we'll fetch the product and we'll save that in our product so we say product product equal to and who will give me the product it is service so I will say service hey

02:50

Speaker A

service get a product by ID and the ID we already have now so this will give me a product now from this product I want to get the image in which format in the bytes format so I will say bite aray

02:59

Speaker A

image file equal to how will you get this so I will say hey product get me the image data dot get me the bytes okay get image data itself is a bite right yeah it's a itself is a bite so we got

03:15

Speaker A

the bytes we don't need the name of it but we'll need type because on the client side we have to send the content type what of a Content we are working with because there might be some issues so we'll send the content up as well so

03:27

Speaker A

let's return the data now so since we have the image so return this time we want to send the content Ty as well so I will use a different format response entity because it has multiple ways of doing this uh you can send the okay

03:38

Speaker A

which is the status and we can say dot I want to send the content type as well the content type is okay content type is Media type so we have to say media type dot uh we have to

03:52

Speaker A

use value type value of and you have to mention the type of the content and how will you get the content typee so say product dot get image type uh apart from this so we have we are sending the

04:06

Speaker A

status okay then we are sending the content type we have to also send the data right so data will be going in a body not boy body and the data itself is image file okay looks good so we got the

04:21

Speaker A

product then we got the image in the bite format we are sending a response by sending okay we sending the content type which is the get get image type and and then we are setting the image file uh

04:31

Speaker A

you just try out without the content type I tried before this there was some issue and uh this has resolved it you try it without it and let me know in the comments if it is working for you so now

04:41

Speaker A

with this let's refresh I hope this will work hope but again when you restart we have to create the object once again so let's try so Tomcat started uh let's go back here click on home you can see no product available I will say add

04:57

Speaker A

product I will say Galaxy M that's a phone name brand is Samsung best phone $999 okay that's a huge price for this phone $500 it's a mobile phone stock is five uh release date is let's say 1st June

05:17

Speaker A

image pegged product is available click on submit it says product added successfully that's great Okay click on home oh we got the image okay so that's a good thing click on this and okay description is still not there

05:33

Speaker A

okay description is there yeah it is best phone uh stock is now five so we have solved that problem it says add to card so the names for the issue and we got the image it's huge but then that is

05:42

Speaker A

something CSS issue not our issue right I can click on add to card it says added to the card but we have to manage this in the back end oh no that's a UI UI feature anyway uh now I will add more

05:54

Speaker A

products I'll say sports Show brand is Nike walk-in code pricee 99 category fashion stock is let's say only one uh date of release is today image I hope I have picked this show image available submit product Ed successfully Great

06:16

Speaker A

Click on home yeah we got two products so like this like this we can add more products and we can see that here and if I click on this this is what we got okay things are working out looking good so

06:28

Speaker A

this is how basically you integrate the front end and back end uh so for a particular URL you have to build the API so that the front end will get the data and that's what we have done cool stuff

06:39

Speaker A

right uh we can handle this more because we actually not checking while sending the data that if the product is already there what if you're sending an ID and the product is not there what you will send so we can handle that here using

06:52

Speaker A

try using eels stuff and yeah so this is working so that's it from adding a product maybe in the upcoming videos we'll focus on update and delete and we'll see in the upcoming videos see everyone bye-bye

Topics: Spring Boot REST API image upload ResponseEntity MediaType product catalog full stack Telusko Java backend development

Study this video

- [Flashcards from this video](https://sozai.app/tools/flashcard-maker/?from=transcript&id=90227)
- [Quiz on this video](https://sozai.app/tools/quiz-generator/?from=transcript&id=90227)
- [Crossword from this video](https://sozai.app/tools/crossword-maker/?from=transcript&id=90227)
- [Word search from this video](https://sozai.app/tools/word-search-maker/?from=transcript&id=90227)
- [Study guide from this video](https://sozai.app/tools/study-guide-maker/?from=transcript&id=90227)

Free, made by AI from this transcript. No signup.


---
This is the markdown twin of https://sozai.app/transcript/spring-project-fetching-image/ — the same content, without the markup.
Published by SozAI (https://sozai.app). Reuse and quotation are allowed with attribution and a link back.
Machine-readable index: https://sozai.app/llms.txt · data API: https://sozai.app/api/