How can I retrieve Firebase storage image URL strings using VueFire in Vue.js?

The issue is that you're pushing reactive ref objects into your array instead of their primitive string values. When you use the VueFire hook (useStorageFileUrl), it returns a ref (e.g., an object with a property called url that is reactive). Vue automatically unwraps top‑level refs in templates but does not recursively unwrap refs inside arrays or objects, which is why you see "[object Object]" when you try to use them as the src.

How to Fix It

You need to push the actual string value (url.value) into your array once the ref has been populated. For example, modify your action like this:

TYPESCRIPTCopied
import { watch } from 'vue'

export const usePlaces = defineStore('places', {
  state: (): PlaceState => ({
    places: useCollection(placesRef),
  }),
  getters: {
    getPlace(state: PlaceState) {
      return (placeId: string) => state.places.find((p) => p.id === placeId)
    },
  },
  actions: {
    // It might be a good idea to make this async if you depend on reactive updates
    fetchImagesURL(placeId: string): string[] {
      const place = this.getPlace(placeId)
      if (place) {
        const imagesUrlArray: string[] = []
        place.images.forEach((imgFilename) => {
          const imageRef = storageRef(storage, `/places/${imgFilename}`)
          const { url } = useStorageFileUrl(imageRef)
          // Using a watcher to wait for url.value to update
          watch(url, (newUrl) => {
            if (newUrl) {
              imagesUrlArray.push(newUrl)
            }
          }, { immediate: true })
        })
        return imagesUrlArray
      }
      return []
    },
  },
})

Alternative Approach

If you expect the URL to be ready synchronously (or want to convert the ref immediately), you can push url.value directly. However, note that if it’s still loading, you might get an undefined value:

TYPESCRIPTCopied
fetchImagesURL(placeId: string): string[] {
  const place = this.getPlace(placeId)
  if (place) {
    const imagesUrlArray: string[] = []
    place.images.forEach((imgFilename) => {
      const imageRef = storageRef(storage, `/places/${imgFilename}`)
      const { url } = useStorageFileUrl(imageRef)
      // Directly push the unwrapped value
      imagesUrlArray.push(url.value)
    })
    return imagesUrlArray
  }
  return []
}

If you try to use the second approach and the URL isn’t immediately available, your returned URL string might be empty or undefined until Firebase returns the actual URL. In that case, consider handling asynchronous updates in your component (e.g., by watching the returned array).

Recap in Your Component

Now, in your component Place.vue, you can use the array of strings directly:

HTMLCopied
<template>
  <pre>debug : {{ placeImagesUrl[0] }}</pre>
  <img :src="placeImagesUrl[0]" alt="Large image" />
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { usePlaces } from '@/shared/store/placeStore'

const route = useRoute()
const placeStore = usePlaces()
const place = placeStore.getPlace(route.params.placeId)
const placeImagesUrl = ref([])

onMounted(async () => {
  placeImagesUrl.value = placeStore.fetchImagesURL(place.id)
})
</script>

With this adjustment, the template will receive plain strings (or updated values once the reactive refs resolve) rather than ref objects, thus fixing the "[object Object]" issue.