从Firebase Firestore获取图像并将其添加到“ li”

时间:2020-10-14 19:00:20

标签: javascript html firebase google-cloud-firestore google-cloud-storage

我尝试从Firebase Storage检索图像,然后将其添加到张贴的“ li”标签中。但是当运行下面的代码时,我得到src = undefined。 “ li”标签中的div起作用。有人可以帮助我吗?

为什么会出现错误:无法读取未定义的属性“ get”?

HTML:

<div class="container">
   <ul class="posts">
   </ul>
</div>

JavaScript:

var postDocRef = db.collection('posts').doc(uid).collection('userPosts')

postDocRef.get().then(snapshot => {
setupPosts(snapshot.docs)
})

const posts = document.querySelector('.posts');

const setupPosts = (data) => {

    let html = '';
    data.forEach(doc => {

        var docRefIDpost = docRef.id

        const post = doc.data();
        const li = `
        <li>
            <div class="title">${post.title}</div>
            <div class="content">${post.content}</div>
            <img class="img">
        </li>
        `;

        var imgRef = db.collection("posts").doc(uid).collection('userPosts').doc(docRefIDpost);

        imgRef.get().then(function(snapshot) {
            var picURL = snapshot.get("picURL")
            
                    var imgpost = document.querySelector(".img");
        
                    imgpost.src = picURL
        
            })

        


        html += li
    })

    posts.innerHTML = html;

}
});

1 个答案:

答案 0 :(得分:0)

每个import android.content.Context import android.util.AttributeSet import android.view.View import android.view.ViewGroup import androidx.recyclerview.widget.GridLayoutManager import androidx.recyclerview.widget.RecyclerView import androidx.recyclerview.widget.RecyclerView.Recycler import com.baziliqo.app.bar.utils.takeIfInstance class WrappableGridLayoutManager(context: Context?, val preferedSpanCount: Int, @RecyclerView.Orientation orientation: Int = RecyclerView.VERTICAL) : GridLayoutManager(context, preferedSpanCount, orientation, false) { private val mMeasuredDimension = IntArray(2) var measuredWidth = 0 var measuredHeight = 0 override fun onMeasure(recycler: Recycler, state: RecyclerView.State, widthSpec: Int, heightSpec: Int) { val suitableSpanCount = preferedSpanCount.coerceAtMost(itemCount) if (spanCount != suitableSpanCount) { spanCount = suitableSpanCount return } val widthMode = View.MeasureSpec.getMode(widthSpec) val heightMode = View.MeasureSpec.getMode(heightSpec) val widthSize = View.MeasureSpec.getSize(widthSpec) val heightSize = View.MeasureSpec.getSize(heightSpec) measuredWidth = 0 measuredHeight = 0 for (i in 0 until itemCount) { measureScrapChild( recycler, i, View.MeasureSpec.makeMeasureSpec(i, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(i, View.MeasureSpec.UNSPECIFIED), mMeasuredDimension ) if (orientation == HORIZONTAL) { if (i % spanCount == 0) { measuredWidth += mMeasuredDimension[0] } if (i < spanCount) { measuredHeight += mMeasuredDimension[1] } } else { if (i % spanCount == 0) { measuredHeight += mMeasuredDimension[1] } if (i < spanCount) { measuredWidth += mMeasuredDimension[0] } } } when (widthMode) { View.MeasureSpec.EXACTLY -> measuredWidth = widthSize View.MeasureSpec.AT_MOST, View.MeasureSpec.UNSPECIFIED -> { } } when (heightMode) { View.MeasureSpec.EXACTLY -> measuredHeight = heightSize View.MeasureSpec.AT_MOST, View.MeasureSpec.UNSPECIFIED -> { } } setMeasuredDimension(measuredWidth, measuredHeight) } private fun measureScrapChild(recycler: Recycler, position: Int, widthSpec: Int, heightSpec: Int, measuredDimension: IntArray) { try { var view = recycler.getViewForPosition(position) ?: return val p = view.layoutParams as RecyclerView.LayoutParams val childWidthSpec = ViewGroup.getChildMeasureSpec( widthSpec, paddingLeft + paddingRight, p.width ) val childHeightSpec = ViewGroup.getChildMeasureSpec( heightSpec, paddingTop + paddingBottom, p.height ) view.measure(childWidthSpec, childHeightSpec) measuredDimension[0] = view.measuredWidth + p.leftMargin + p.rightMargin measuredDimension[1] = view.measuredHeight + p.bottomMargin + p.topMargin recycler.recycleView(view) } catch (e: Exception) { } } } 文档的结构如何?您是否检查过userPosts imgRef不为空? 我认为实际的问题可能是您访问snapshot时缺少对data()的呼叫:

imageURL