I am new to Vue so I don't know many ways to do this. I want to display an image on my application which is stored in the Firebase storage. I am calling a function in the tag in the HTML part which returns the URL of the image. I am able to display the image in the console but it gives me a "Cannot find module" error when it is supposed to return the URL.

HTML

        <div>
            <p> Image gallery:</p>
            <img v-bind:src="getImgUrl()" >
        </div>

Vue Method

         async getImgUrl() {

            // Create a reference to the file we want to download
            const storage = getStorage();
            const stationsRef = ref(storage, 'stations/cal.jpg');

            // Get the download URL
            const imageurl = await getDownloadURL(stationsRef)
            .then((url) => {
                return (url);
            })
            console.log(imageurl)
            return require(imageurl);           
        },

and this is the error that it gives:

Uncaught (in promise) Error: Cannot find module 'https://firebasestorage.googleapis.com/v0/b/rideservices-6a23d.appspot.com/o/stations%2Fcal.jpg?alt=media&token=d020eef5-88f3-4f64-aab0-fcf00d67bcd5'
    at webpackEmptyContext (app.a802d1ae56e3977d.hot-update.js:40:10)
    at Proxy.getImgUrl (serviceRequest.vue?b4a4:168:1)

It would be really helpful if I can get help on this. Thanks in advance!