我想将缩略图设置为从 GraphQL 检索到的图像标签。但是，显示一个字符串

Question

我想将缩略图设置为从 GraphQL 检索到的图像标签。但是，显示一个字符串。 [ [

const HeaderFeedCell = (props) => {
  const {
    title,
    pubDate,
    link,
    content,
    id,} = props.feed;
  return (


 <Card className={styles.container} >
 <Link to={`${link}` } className={styles.link}>

{content}

<Card.Body  className={styles.cardContents} >

<Card.Title  variant="light" className={styles.cardTitle}>     {title}
</Card.Title>

<div className={styles.footer}>

<Card.Footer >{pubDate}</Card.Footer>
</div>

Answer 1

可能这不是最佳做法，但如果您确定来自服务器的数据并且可以信任它，您可以使用 dangerouslySetInnerHTML:

执行类似的操作

const HeaderFeedCell = (props) => {
  const {
    title,
    pubDate,
    link,
    content,
    id,} = props.feed;
  return (
    <Card className={styles.container}>
      <Link to={`${link}` } className={styles.link} />
      <div dangerouslySetInnerHTML={{__html: content}} /> //notice the dangerouslySetInnerHTML
      <Card.Body  className={styles.cardContents} >
        <Card.Title  variant="light" className={styles.cardTitle}>
          {title}
        </Card.Title>
      </Card.Body>
      <div className={styles.footer}>
        <Card.Footer >{pubDate}</Card.Footer>
      </div>
    </Card>
)}

我想将缩略图设置为从 GraphQL 检索到的图像标签。但是，显示一个字符串

I want to set the thumbnail to an image tag retrieved from GraphQL. However, a string is displayed

reactjs

graphql