Handling Base64-Encoded Images with Spring Boot and Vue.js

Transferring image files between a backend server and a frontend client can be done in various ways. Among them, sending Base64-encoded images is simple yet effective in many scenarios. In this post, we will walk through how to implement a solution where a Spring Boot backend encodes images as Base64 and provides them to a Vue.js frontend for display in the browser.

What is Base64 Encoding?

Base64 is a way of encoding binary data (such as images) into a text-based format. This makes it easy to include images as part of a REST API response or in JSON payloads. However, it's worth noting that Base64 increases the size of the original binary data by approximately 33%.

Despite the size overhead, Base64 encoding is often used for convenience when dealing with APIs that need to transmit small to medium-sized image files or when embedding images directly into HTML or JSON.

---

Providing Base64 Images with Spring Boot

The backend server is responsible for reading image files, encoding them into Base64 format, and serving them to the client. Here’s how to achieve that in Spring Boot:

1. Reading Image Files and Encoding in Base64

import org.springframework.core.io.ClassPathResource;  
import org.springframework.util.Base64Utils;  
import org.springframework.web.bind.annotation.GetMapping;  
import org.springframework.web.bind.annotation.RequestMapping;  
import org.springframework.web.bind.annotation.RestController;  

import java.io.IOException;  
import java.nio.file.Files;  
import java.nio.file.Path;  
import java.nio.file.Paths;  

@RestController  
@RequestMapping("/api/images")  
public class ImageController {  

    @GetMapping("/base64")  
    public String getImageAsBase64() throws IOException {  
        // Image file path (e.g., resources/static/images/sample.jpg)  
        Path imagePath = Paths.get(new ClassPathResource("static/images/sample.jpg").getURI());  
        byte[] imageBytes = Files.readAllBytes(imagePath);  
        return Base64Utils.encodeToString(imageBytes);  
    }  
}

This code snippet reads an image file (sample.jpg in this case) from the server, encodes it into a Base64 string, and sends it as a response to the client.

---

Displaying Base64 Images with Vue.js

Now, let’s process the Base64-encoded image in Vue.js and display it in the browser.

1. Requesting and Displaying Base64 Images

<template>  
  <div>  
    <h1>Display Base64 Image</h1>  
    <img v-if="imageSrc" :src="imageSrc" alt="Base64 Image" />  
  </div>  
</template>  

<script>  
import axios from 'axios';  

export default {  
  data() {  
    return {  
      imageSrc: ''  
    };  
  },  
  mounted() {  
    this.fetchImage();  
  },  
  methods: {  
    async fetchImage() {  
      try {  
        const response = await axios.get('/api/images/base64');  
        this.imageSrc = `data:image/jpeg;base64,${response.data}`;  
      } catch (error) {  
        console.error('Error fetching image:', error);  
      }  
    }  
  }  
};  
</script>

2. Converting to a Blob URL (Optional)

For better performance with larger images, you can convert the Base64 string into a Blob object and create a Blob URL.

async fetchImageAsBlob() {  
  try {  
    const response = await axios.get('/api/images/base64');  
    const base64String = response.data;  
    const binary = atob(base64String);  
    const array = new Uint8Array(binary.length);  
    for (let i = 0; i < binary.length; i++) {  
      array[i] = binary.charCodeAt(i);  
    }  
    const blob = new Blob([array], { type: 'image/jpeg' });  
    this.imageSrc = URL.createObjectURL(blob);  
  } catch (error) {  
    console.error('Error fetching Blob image:', error);  
  }  
}

---

Base64 vs Blob URLs

Both Base64 and Blob URLs have their advantages and disadvantages. Knowing when to use each approach is critical to building an efficient application.

Comparison Table

Approach	Advantages	Disadvantages
Base64	Easy to include in JSON or HTML directly	Larger data size and higher memory usage
Blob	Better for performance with larger images	Requires additional conversion logic

---

Additional Considerations

1. Performance

If you’re dealing with high-resolution images or transmitting a large number of images, Base64 encoding might not be the best choice due to its increased size. Consider using Blob objects or serving images directly from a static file server (e.g., AWS S3, CDN).

2. Browser Caching

Blob URLs can benefit from browser caching mechanisms, while Base64 strings are always decoded in-memory each time they are rendered.

3. Security

Always sanitize and validate any image or file data you send from the backend, especially if the images are user-uploaded.

---

Conclusion

Using Base64 encoding to send and display images in a Spring Boot and Vue.js application is straightforward and effective for small-scale applications or prototyping. However, as your application scales, you might want to optimize performance using Blob URLs or direct file serving.

By understanding the trade-offs between Base64 and Blob URLs, you can build better-performing applications tailored to your use case.