Material-UI CardMedia не загружает динамическое c изображение из URL-адреса, но работает со статическим c изображением

Question

Я написал функцию, которая лучше всего возвращает URL-адреса изображений в memType:

const renderPicture = (memType, memID) => {
    if ((memType === "Music")) {
        toString(memID.music.map((albumArt) => (albumArt.albumArt)))
    } else if ((memType === "Movie")) {
        toString(memID.movie.map((poster) => (poster.poster)))
    } else if ((memType === "TVShow")) {
        toString(memID.tvshow.map((poster) => (poster.poster)))
    } else if ((memType === "Game")) {
        toString(memID.game.map((boxArt) => (boxArt.boxArt)))
    } else if ((memType === "Event")) {
        return require('../img/historyHead.png')
    }
}

Это вызывается CardMedia при рендеринге страницы:

<CardMedia
 className={classes.cardMedia}
 image={renderPicture(memID.memType, memID)}
 style={{ width: "100%", height: "150px" }}
/>

Это работает для stati c изображения для memType === 'Event', но не для других типов memTypes, возвращающих URL. Я считаю, что это как-то связано с require, но не могу найти лучший способ включить это.

CardMedia находится внутри более крупной функции, которая возвращает данные из запроса GraphQL:

const getMemsCard = (i) => {
    return data.Mem.map((memID, i) => (
        memID.mem.includes(filter) &&
        < Grid item xs={12} sm={4} lg={4} key={i} >
            <Card className={classes.card} onClick={() => history.push(`/mems/${memID.memID}`)}>
                <CardHeader className={classes.cardHeader}
                    avatar={
                        <Avatar aria-label="memory" className={classes.avatar}>
                            {renderAvatar(memID.memType)}
                        </Avatar>
                    }
                    action={
                        <span className={classes.emoji}>{memID.emoji}</span>
                    }
                    title={<span style={{ fontWeight: '550' }}>{memID.mem}</span>}
                    subheader={<span>{memID.date.day}-{memID.date.month}-{memID.date.year}</span>}
                />
                <CardMedia
                    className={classes.cardMedia}
                    image={renderPicture(memID.memType, memID)}
                    style={{ width: "100%", height: "150px" }}
                />
                <CardContent className={classes.cardContent}>
                    <p>with {memID.person
                        .map((person, i, arr) => {
                            let divider = i < arr.length - 1 && <span>, </span>;
                            return (
                                <span key={i}>
                                    {person.nickname}
                                    {divider}
                                </span>
                            )
                        })}
                        <span> at</span> {memID.place
                            .map((place, i) => <span key={i}>{place.place}</span>)}</p>
                </CardContent>
            </Card>
        </Grid >
    ))
};

Запрос GraphQL вызывается следующим образом:

const { loading, data, error } = useQuery(GET_MEM)
if (loading) return <p style={{ textAlign: "center" }} >Loading...</p>
if (error) return <p style={{ textAlign: "center" }} >Error</p>

Структура запроса Graph QL выглядит следующим образом:

const GET_MEM = gql`
  {
    Mem(orderBy: date_asc) {
      memID
      mem
      date {
        day
        month
        year
      }
      memType
      emoji
      personID @skip(if: false)
      placeID @skip(if: false)
      person {
        nickname
      }
      place {
        place
      }
      music {
          albumArt
      }
      movie {
        poster
      }
      tvshow {
        poster
      }
      game {
          boxArt
      }
    }
  }
`

Ниже приведены некоторые примеры данных:

"Mem": [
  {
    "memID": "180",
    "mem": "The Empire Strikes Back",
    "date": {
      "day": 20,
      "month": 5,
      "year": 1980
    },
    "memType": "Movie",
    "emoji": "?",
    "personID": null,
    "placeID": null,
    "person": [],
    "place": [],
    "music": [],
    "movie": [
      {
        "poster": "https://image.tmdb.org/t/p/original//7BuH8itoSrLExs2YZSsM01Qk2no.jpg"
      }
    ],
    "tvshow": [],
    "game": []
  },

По сути, GraphQL запрашивает базу данных графа Neo4j и возвращает все узлы типа 'Mem', а также URL-адреса изображений из других узлов, которые связаны с узлами 'Mem' типа 'Person', 'Place', ' Musi c ',' Mov ie ',' TVShow 'и' Game '.

Answer 1

Опора image для CardMedia требует строковой опоры. Но вы передаете массив в image, потому что функция .map() возвращает массив.

Answer 2

После долгих возни мне удалось решить эту проблему.

Во-первых, я использовал toString() неправильно, так как он должен идти после массива как .toString().

Во-вторых, мне нужно было добавить возврат к каждому из операторов if.

Наконец, мне нужно было удалить require из оператора if, поскольку это работает для внутренних изображений stati c, но не для внешних URL-адресов .

Мой последний код:

const renderPicture = (memType, memID) => {
    if ((memType === "Music")) {
        return ((memID.music.map((albumArt) => (albumArt.albumArt))).toString())
    } else if ((memType === "Movie")) {
        return ((memID.movie.map((poster) => (poster.poster))).toString())
    } else if ((memType === "TVShow")) {
        return ((memID.tvshow.map((poster) => (poster.poster))).toString())
    } else if ((memType === "Game")) {
        return ((memID.game.map((boxArt) => (boxArt.boxArt))).toString())
    } else if ((memType === "Event")) {
        return require('../../img/historyHead.png')
    }
}