0

当我尝试从连接到 Firebase 数据库的 Flamelink 架构中加载图片时遇到问题。

我有一个显示待售小狗的简单组件：

const PuppyCard = (props) => {
  return (
    <div className='PuppyCard'>
      <div className='PuppyCard__img'>
        <img src={props.data.picture} alt={props.data.name} />
      </div>
      <div className='PuppyCard__text'>
        <h2>{props.data.name}</h2>
        <h3>{props.data.sex}</h3>
        <h4>{props.data.age}</h4>
        <h4>{props.data.price}</h4>
      </div>
    </div>
  )
}

正如你所看到的，有一个 props.data.picture 作为我的图像源，但是当我尝试在网站上加载它时，我得到了除了图片之外的所有内容。查看我的数据库后，我看到图片不是文件，而是对由 flamelink 创建的其他文件夹的引用： 1

这就是我现在从数据库中获取的内容。

getPuppies = () => {
    db
      .collection('fl_content')
      .get()
      .then(docs => {
        if (!docs.empty) {
          let allPuppies = []
          docs.forEach(function (doc) {
            const puppy = {
              id: doc,
              ...doc.data()
            }

            allPuppies.push(puppy)
          })

          this.setState({
            puppies: allPuppies
          }, () => {
            this.setState({
              isLoaded: true
            })
          })
        }
      })
  }

任何帮助表示赞赏！

4

1 回答 1

0

我已经设法解决了这个问题，尽管现在我意识到这个问题并不准确。

我试图做的是让上传到 Flamelink CMS 的图片显示在网站上，但是当我点击道具的属性时，我只得到一个文件 ID。

我对这个问题的解决方案是：

  1. 将文件 ID 存储在变量中

  2. 在 Cloud Firestore 中查询由 flamelink CMS 创建的名为“fl_files”的文件夹 =>

     db.collection('fl_files').doc(fileID).get().then(function (doc) {
 var fileName = doc.Nf.nn.proto.mapValue.fields.file.stringValue;
 console.log(fileName);

 storageRef.child('flamelink/media/' + fileName).getDownloadURL().then(function (url) {
   console.log(url);

   var img = document.getElementById('an id for the image inside a react child component');
   img.src = url
 })

请注意，“flamelink/media/”位于存储内部，而不是 Cloud Firestore 内部。

希望这可以帮助遇到同样问题的人！问题已关闭:)

于 2020-10-07T13:46:01.207 回答