如何从 firestore 数据库中获取和 return 图片

Question

我正在开发一个带有 React 和 Redux 的 disneyplus 克隆，我能够将数据存储在 firestore 上并访问 React 应用程序。但是卡片图像没有更新。

import React from 'react'
import styled from 'styled-components'
import { selctMovies, selectMovies } from '../features/movie/movieSlice'
import { useSelector } from 'react-redux'

function Movies() {

    const movies = useSelector(selectMovies);

    return (
        <Container>
            <h4>Recomended for You</h4>
            <Content>
                { movies && movies.map((movie) => {
                    console.log(movie.cardImg);
                    <Wrap>
                        <img src={movie.cardImg} />
                    </Wrap>
                })
                }

但是当我这样做 console.log(); 时，我可以获得图像 url，

我的代码就是这样

Answer 1

1- 你的地图回调函数中没有return。

2- 你应该在 map 函数中使用 key。

3- 你应该在图片中使用 alt。

试试这个

{   movies && movies.map((movie, index) => {
        console.log(movie.cardImg);
        return (<Wrap key={index}>
            <img src={movie.cardImg} alt="Card image" />
        </Wrap>)
    })
}

Answer 2

为图像制作单独的组件，希望您的问题得到解决。

如何从 firestore 数据库中获取和 return 图片

How can I get and return the image from the firestore database

reactjs

redux

google-cloud-firestore