How can i send images from server to my client?

Question

I have been learning spring and to get the things together I am making an e-commerce application. I have used rest api to connect client and server. Now i need to send images to the client. My images are already stored in src/resources folder. What i need to know is that how do i send those images through rest api. so that i can use it in my client

I am very noob at this. I tried google and all i can find is examples of image files uploading to the server. I can't find a example of sending file from server to client through rest api. i've been stuck in this for past three day

Here is my rest controller: now i need to know what should i do next so that i can send images

@RestController
@RequestMapping("/api")
public class CategoriesRestController {

// autowire customer service
@Autowired
private CategoriesService service;


//add mapping for GET all customer
@GetMapping("/categories")
public List<Categories> getCategories() {

    return service.getCategories();
}

// adding mapping for GET only one customer
@GetMapping("/categories/{categoryId}")
public Categories getCategory(@PathVariable int categoryId) {

    Categories categories = service.getCategory(categoryId);

    if(categories == null) {
        throw new CustomerNotFoundException("Customer id not found- "+ categoryId);
    }else {
    return categories;
    }
}

// adding mapping for POST/customer i.e. insert a customer
@PostMapping("/categories")
public Categories addCategories(@RequestBody Categories theCategories) { //@RequestBody will convert JSON to JAVA object

    // just to make things clear... always set id to 0 when inserting new object
    // so that it will be created instead of update
    theCategories.setId(0);
    service.saveCategories(theCategories);

    return theCategories;
}

score 2 · Accepted Answer · answered Aug 10 '19 at 04:32

2

You might be thinking about the problem the wrong way. Instead of sending the image itself through the rest API, the HTML only needs the path to the image. You store the image in a directory, and you can pass the path to the image to your HTML. You could add a variable "imagePath" to Categories and the HTML could reference it in the tag

answered Aug 10 '19 at 04:32

mbridges

184
1
2
12

so i make a @Getmapping request and return image path? – javaNoob Aug 10 '19 at 04:53

score 2 · Answer 2 · answered Aug 10 '19 at 05:00

You can convert your images to base64:

byte[] fileContent = FileUtils.readFileToByteArray(new File(filePath));
String encodedString = Base64.getEncoder().encodeToString(fileContent);

and then send this property through your API. then in your client side you can use it like this:

<img src=json.encodedString />

Here json is an object which has been sent over API.

Before sending the encodedString you may appned at its beginning some things like below, to make it easier to display in front-end:

"data:image/png;base64,"

To display a base64 image in front-end you should use some thing like this:

<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

How can i send images from server to my client?

2 Answers2