Protect GET calls when authentication is with access-tokens

My question is not specific for a certain language or framework, and relevant to any authentication with access-token.

I have separate backend and frontend servers (in my case NodeJS and Vue-3).
Authentication method is an access token – user logs-in, receive an access-token and this one is sent in header with each request.

My problem is how to protect GET calls, especially for image and media html tags (<img src='....'/>).

I figured out that for “normal” GET calls, which I perform with axios, I can add the token as well:

axios.interceptors.request.use(function (config) {
    // Retrieve access token which was stored previously 
    const authStore = useAuthStore();
    const accessToken = authStore.accessToken;

    if (!!accessToken) {
        config.headers.Authorization = 'Bearer ' +  accessToken.value;
    }

    return config;
});

Which will look like this in curl:

curl --location 'http://api.mybackendserver.com' 
--header 'Authorization: Bearer XXXXX'

However, when I need an image for example:

<img src="http://api.mybackendserver.com/uploads/xxx">

I have a problem – either I allow public access to these files, which are private, or I cannot show image for user (in my case inside a text-editor, which makes the problem even more complex).

My question is:
What options do I have? What would be the best practice to implement it?