How do I create the image button in JUCE/Otodeck?

Hi, I am trying to create a DJ deck using JUCE.

I am trying to use a test image for the “play” button that is located in the same folder as the source code.

Here is my maincomponent.h:

lass MainComponent : public AudioAppComponent,
public Button::Listener
{
public:
//==============================================================================
MainComponent();
~MainComponent();

//==============================================================================
void prepareToPlay (int samplesPerBlockExpected, double sampleRate) override;
void getNextAudioBlock (const AudioSourceChannelInfo& bufferToFill) override;
void releaseResources() override;

//==============================================================================
void paint (Graphics& g) override;
void resized() override;

void buttonClicked(Button*) override;

private:
//==============================================================================
// Your private member variables go here…

TextButton playButton{"PLAY"};

std::unique_ptr<ImageButton> playButtonImage;

Slider volSlider; 

JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainComponent)

};

Here is my MainComponent.cpp:

#include “MainComponent.h”

//==============================================================================
MainComponent::MainComponent()
{
// Make sure you set the size of the component after
// you add any child components.
setSize (800, 600);

// Some platforms require permissions to open input channels so request that here
if (RuntimePermissions::isRequired (RuntimePermissions::recordAudio)
    && ! RuntimePermissions::isGranted (RuntimePermissions::recordAudio))
{
    RuntimePermissions::request (RuntimePermissions::recordAudio,
                                 [&] (bool granted) { if (granted)  setAudioChannels (2, 2); });
}  
else
{
    // Specify the number of input and output channels that we want to open
    setAudioChannels (0, 2);
}
// Load the image for the ImageButton
std::unique_ptr<Image> playImage(ImageCache::getFromMemory(BinaryData::Tes_png, BinaryData::Tes_pngSize));
playButtonImage = std::make_unique<ImageButton>();
playButtonImage->setImage(*playImage);
playButtonImage->setBounds(0, 0, getWidth(), getHeight() / 5);
addAndMakeVisible(*playButtonImage);

addAndMakeVisible(playButton);
addAndMakeVisible(volSlider);    

}

MainComponent::~MainComponent()
{
// This shuts down the audio device and clears the audio source.
shutdownAudio();
addAndMakeVisible(playButton);

playButton.addListener(this);

}

void MainComponent::buttonClicked(Button* button)
{
std::cout << “Button has been clicked” << std::endl;
}

//==============================================================================
void MainComponent::prepareToPlay (int samplesPerBlockExpected, double sampleRate)
{

}

void MainComponent::getNextAudioBlock (const AudioSourceChannelInfo& bufferToFill)
{
bufferToFill.clearActiveBufferRegion();
}

void MainComponent::releaseResources()
{
// This will be called when the audio device stops, or when it is being
// restarted due to a setting change.

// For more details, see the help for AudioProcessor::releaseResources()

}

//==============================================================================
void MainComponent::paint (Graphics& g)
{
// (Our component is opaque, so we must completely fill the background with a solid colour)
g.fillAll (getLookAndFeel().findColour (ResizableWindow::backgroundColourId));

// You can add your drawing code here!

}

void MainComponent::resized()
{
// This is called when the MainContentComponent is resized.
// If you add any child components, this is where you should
// update their positions.
double rowH = getHeight() / 5;
playButton.setBounds(0, 0, getWidth(), rowH);
volSlider.setBounds(0, rowH * 2, getWidth(), rowH);

}

I am still facing errors with implementing the image button. Would like if someone can point out the mistake and the correct way to do it. (Read the documents, not sure how to modify from the guide.)