Question

我似乎无法解决这个问题，网址没有显示为图片，我该怎么办？

我认为问题出在样式背景图片上，但我不确定，名称显示正常但图片显示不正常。

代码如下：

import React, {useState} from "react";
import TinderCard from "react-tinder-card";


function TinderCards() {

const [people, setPeople] = useState([
    {
        name:"sonny", 
        url:"https://upload.wikimedia.org/wikipedia/commons/b/b8/Lola_Astanova.jpg",
    },
    {
        name:"danny",
        url:"https://upload.wikimedia.org/wikipedia/commons/b/b8/Lola_Astanova.jpg",
    },
]);
// const people = [];             array
return (
    <div>
      <h1>cards</h1>

             {people.map((person) => ( <TinderCard 
             className="swipe"
             key={person.name}
             preventSwipe={['up', 'down']}
             >



                 
                 <div 
                     // eslint-disable-next-line no-template-curly-in-string
                     style={{ backgroundImage: 'url(${person.url})' }}
                     className="card">
                     <h3>{person.name}</h3>
                     
                 </div>
             </TinderCard>
             ))}
    </div>
);
 }

 export default TinderCards

Answer 1

这也是我会做的。如果卡住，则向后工作。我认为抽动会起作用。不显示图像等于？您是否查看过源代码/输出了什么？

样式背景不显示图像

1 个答案: