将 firebase 存储中的图像连接到 firebase 中的数据文档

Question

I am trying to access a single, specific image from firebase storage based on a data document. I currently have a data document with 3 fields: name, price, and imageLink. I want the image link to connect somehow to an image that I have saved in my storage so that I can display the price and name with the correct corresponding image. Not sure what I need to put in the imageLink and how to get a single image.

This is how I am uploading the image to firebase

`function uploadImage () {
if(imageUpload == null) return
const imageRef = ref(storage, `images/${imageUpload.name + v4()}`)
setImageUrl("image ref", imageRef._location.path_)
uploadBytes(imageRef, imageUpload).then(() => {
  alert("Image Uploaded")
})

}`

and this is what I am doing to try access the image

const createWatchListing = async () => {
// uploadImage()
await addDoc(watchCollectionRef, {name: watchName, price: watchPrice, watchImageUrl: imageUrl})

}

 <div>
          <h3>{watch.name}</h3>
          <h3>${watch.price}</h3>
          <img src={watch.watchImageUrl} /> <------
          <form onSubmit={() => {updateWatch(watch.id, updatedWatchName, updatedWatchPrice )}}>
            <input placeholder={watch.name} onChange={e => {setUpdatedWatchName(e.target.value)}}/>
            <input type="number" placeholder={watch.price} onChange={e => {setUpdatedWatchPrice(e.target.value)}}/>
            <button>Update Watch</button>
            <button onClick={() => {deleteWatchListing(watch.id)}}>Delete Listing</button>
          </form>  
        </div>

I tried putting the file url in, but it is different to the image url I get back from firebase when I use getDownloadUrl. I am able to get all the images from firebase currently, just not indivual ones.

Answer 1

yes, I have also faced that issue. But that has been resolved by adding these permissions. OR You can follow the following steps:-

1. https://console.cloud.google.com/storage/browser?project=YOUR_PROJECT_NAME&supportedpurview=project&cloudshell=true 2.select our project.
2. click on open shell (it may take 1min to open)
3. command: gsutil cors set cors.json gs://YOURPROJECTNAME.appspot.com/*