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

Question

我正在尝试根据数据文档从 firebase 存储中访问单个特定图像。 我目前有一个包含 3 个字段的数据文档：名称、价格和 imageLink。 我希望图像链接以某种方式连接到我保存在存储中的图像，以便我可以使用正确的对应图像显示价格和名称。 不确定我需要在 imageLink 中放入什么以及如何获取单个图像。

这就是我将图像上传到 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")
})

}`

这就是我正在做的尝试访问图像

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>

我尝试将文件 url 放入，但它与我使用 getDownloadUrl 从 firebase 返回的图像 url 不同。 我目前能够从 firebase 获取所有图像，但不是个别图像。

Answer 1

是的，我也遇到过这个问题。 但这已通过添加这些权限得到解决。 或者您可以按照以下步骤操作：-

1. https://console.cloud.google.com/storage/browser?project=YOUR_PROJECT_NAME&supportedpurview=project&cloudshell=true 2.select 我们的项目。
2. 点击打开shell（打开可能需要1分钟）
3. 命令：gsutil cors set cors.json gs://YOURPROJECTNAME.appspot.com/*