有人能帮我解决火种卡上的这个问题吗

Question

我正在学习如何构建 tinder 克隆，但是当我尝试使用 url 传递一些图像时它不起作用，我尝试更改 url 但图像发生而不显示图像。 这是我的代码。 火种卡：

import React, { useState } from 'react';
import TinderCard from 'react-tinder-card';
import './TinderCards.css';

function TinderCards(){
const [people, setpeople] = useState([{
    name: 'jonathan pascal',
    url: "https://static1.purepeople.com/articles/4/86/40/4/@/687935-steve-jobs-a-san-francisco-le-9- 
624x600-3.jpg",
},
{
    name:'bahavu atosha',
    url: "",
}

]); 
return(
    <div>
        <h1>Muhimu cards</h1>
        {people.map(person=> (
            <TinderCard
             className="swipe"
             key={person.name}
             preventSwipe={['up', 'down']}
             >
                <div 
                style={{ backgroundImage: 'url(${person.url})' }} 
                className="card">
                    <h3>{person.name}</h3>
                </div>
            </TinderCard>
        ))}

    </div>
  )
 }
  export default TinderCards;

Answer 1

我主要通过修复与模板文字相关的语法问题来解决您的问题。

import React, { useState } from "react";
import TinderCard from "react-tinder-card";
import "./TinderCards.css";

function TinderCards() {
  const [people, setpeople] = useState([
    {
      name: "jonathan pascal",
      url: "https://static1.purepeople.com/articles/4/86/40/4/@/687935-steve-jobs-a-san-francisco-le-9-624x600-3.jpg", // Line breaking issue exist here before
    },
    {
      name: "bahavu atosha",
      url: "",
    },
  ]);
  return (
    <div>
      <h1>Muhimu cards</h1>
      {people.map((person) => (
        <TinderCard
          className="swipe"
          key={person.name}
          preventSwipe={["up", "down"]}
        >
          <div
            style={{
              backgroundImage: `url(${person.url})` /* Add backticks here */,
            }}
            className="card"
          >
            <h3>{person.name}</h3>
          </div>
        </TinderCard>
      ))}
    </div>
  );
}
export default TinderCards;

如果您需要进一步的支持，请告诉我。