如何解决有没有人可以帮我解决火种卡上的这个问题
我正在学习如何构建 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;
如果您需要进一步的支持,请告诉我。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。