Spring Boot에서 이미지 가져오기

Binary를 직접 가져오는 경우

buttons: [
    {
        text: 'Generate QR Code',
        handler: function(button) {
            const urlToEncode = 'https://example.com';

            // Directly set the src of the image to the FastAPI or Spring Boot endpoint that returns the image
            const qrCodeUrl = '/qrcode?url=' + encodeURIComponent(urlToEncode);
            
            // Add the image component to the form
            button.up('form').add({
                xtype: 'image',
                itemId: 'qrcode',
                src: qrCodeUrl,
                alt: 'QR Code',
                margin: '0 0 10 0',
                listeners: {
                    load: function(imageComponent) {
                        let imageElement = imageComponent.getEl().dom;
                        imageComponent.setSize(imageElement.naturalWidth, imageElement.naturalHeight);
                    }
                }
            });
        }
    }
]

Base64로 가져오는 경우

buttons: [
    {
        text: 'Generate QR Code',
        handler: function(button) {
            const urlToEncode = 'https://example.com';

            Ext.Ajax.request({
                url: '/qrcode',  // Spring Boot endpoint returning the base64-encoded image
                method: 'GET',
                params: {
                    url: urlToEncode  // URL to encode in the QR code
                },
                success: function(response) {
                    const jsonResponse = Ext.decode(response.responseText);
                    
                    // Add image with the base64-encoded QR code
                    button.up('form').add({
                        xtype: 'image',
                        itemId: 'qrcode',
                        src: 'data:image/png;base64,' + jsonResponse.qrCode,
                        alt: 'QR Code',
                        margin: '0 0 10 0',
                        listeners: {
                            load: function(imageComponent) {
                                let imageElement = imageComponent.getEl().dom;
                                imageComponent.setSize(imageElement.naturalWidth, imageElement.naturalHeight);
                            }
                        }
                    });
                },
                failure: function(response) {
                    console.log('Server-side failure with status code ' + response.status);
                }
            });
        }
    }
]