如何制作具有可变图像的按钮答案

【问题标题】：How to make a button with a changeable image如何制作具有可变图像的按钮
【发布时间】：2021-10-02 20:11:35
【问题描述】：

我想将该按钮的背景图像制作为 .svg 图像，我可以根据收到的卡号和 simbol 更改数字和 simbol（我已经有 svg）

基本上我有这个 svg 图像，我想根据卡中收到的号码更改文本内的内容

    <svg width="71" height="98" viewBox="0 0 71 98" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M66.6121 0.906853H4.39932C2.30679 0.906853 0.610458 2.59338 0.610458 4.67382V93.6315C0.610458 95.7119 2.30679 97.3984 4.39932 97.3984H66.6121C68.7046 97.3984 70.4009 95.7119 70.4009 93.6315V4.67382C70.4009 2.59338 68.7046 0.906853 66.6121 0.906853Z" fill="white" stroke="black" stroke-opacity="0.952703" stroke-width="0.253" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.08558 27.9234V70.1461C21.6968 46.8908 53.5012 94.1147 66.9258 70.0965V27.8738C52.2288 51.9606 22.6285 4.40452 4.08558 27.9234" fill="white"/>
<text x="40%" y="57%" fill="black" fontSize="25" fontFamily="Franklin Gothic Medium">1</text>
<text x="5" y="17" fill="black" fontSize="16" fontFamily="Franklin Gothic Medium">1</text>
<text x="70%" y="90%" fill="black" fontSize="16" fontFamily="Franklin Gothic Medium">1</text>
</svg>


const [cards, setCards] = useState(props.cards);

let cardname = ["h0", "h1", "h2", "h3", "h4", "h5", "h6"]
//h means heart and the number

let botoescartas = cards.map((card) =>   
  <button className="cards" onClick={playcard} name={card} key={card.toString()}>
     {cardname[card]}
  </button>
);

【问题讨论】：

标签： javascript html css reactjs svg

【解决方案1】：

假设您的 svg 的 src 类似于 h0.svg

<button style={{ backgroundImage: `url${cardName[card]}.svg` ....>...</button>

【讨论】：