有没有人可以帮我解决火种卡上的这个问题

问题描述

我正在学习如何构建 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;

解决方法

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

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;

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