Get Images to vue3 project from AWS using aws-sdk

Question:
I am trying to get images to my Vue3 project from my AWS by using aws-sdk

Previously I have been using Vue2 but when using Vue3 things aren’t working anymore.

In Vue2 I had a file called GetImageFunc.js with the following code in it

export const func = {
  get_image: (data) => {
    const AWS = require('aws-sdk')
    const myBucket = 'garemotest1'
    const myKey = data
    const signedUrlExpireSeconds = 3600 * 1

    const s3 = new AWS.S3({
      accessKeyId:  process.env.VUE_APP_AWS_ACCESS_KEY,
      signatureVersion: 'v4',
      region: 'eu-north-1',
      secretAccessKey: process.env.VUE_APP_AWS_SECRET_KEY
    });

    const url = s3.getSignedUrl('getObject', {
      Bucket: myBucket,
      Key: myKey,
      Expires: signedUrlExpireSeconds
    })
    return url
  }
}

Then in the component where I wanted to fetch the image I had

<img :src="get_image()">

And the function get_image() was defined as

  get_image(){
        return this.$func.get_image('image.jpg')
    },

But when running this with Vue3 problem arose.
Firstly the component couldn’t find this.$func so I had to add

import { func } from '@/GetImageFunc.js';

and change the function get_image to

 get_image(){
          return func.get_image('image.jpg')
      }

Then when running the code above I first got “Uncaught (in promise) ReferenceError: require is not defined” so I changed the GetImageFunc.js file to

import * as AWS from 'aws-sdk';

export const func = {
  get_image: (data) => {
    const myBucket = 'garemotest1'
    const myKey = data
    const signedUrlExpireSeconds = 3600 * 1

    const s3 = new AWS.S3({
      accessKeyId: AWS_access_key,
      signatureVersion: 'v4',
      region: 'eu-north-1',
      secretAccessKey: AWS_secret_key
    });

    const url = s3.getSignedUrl('getObject', {
      Bucket: myBucket,
      Key: myKey,
      Expires: signedUrlExpireSeconds
    })
    return url
  }
}

But that gave me the error: “Uncaught ReferenceError: global is not defined”
I tried to add window.global ||= window on top to fix that problem but it didn’t solve the problem.

What can I do to solve it?
Am I on the right track?

I also tried witht the following code in GetImageFunc.js but still no success

import { S3 } from 'aws-sdk';

export const func = {
  get_image: async (data) => {
    const myBucket = 'garemotest1';
    const myKey = data;
    const signedUrlExpireSeconds = 3600 * 1;

    
    const s3 = new S3({
      accessKeyId: process.env['VUE_APP_AWS_ACCESS_KEY'],
      secretAccessKey: process.env['VUE_APP_AWS_SECRET_KEY'],
      region: 'eu-north-1',
      signatureVersion: 'v4',
    });

    try {
      const url = await s3.getSignedUrlPromise('getObject', {
        Bucket: myBucket,
        Key: myKey,
        Expires: signedUrlExpireSeconds,
      });
      return url;
    } catch (error) {
      console.error('Error getting signed URL:', error);
      throw error;
    }
  },
};