reactjs 我尝试使用React添加一个背景img,但是路径有问题

axr492tv  于 2022-12-18  发布在  React
关注(0)|答案(1)|浏览(126)

这是设置html标记样式的状态

const [favStyleButton, setFavStyleButton] = useState({
    width: "100px",
    height: " 100px",
    backgroundImage: "url('../media/pokeball.png')",
    backgroundSize: "contain",
    backgroundColor: "transparent",
    border: "none",
  });

使用css的作品

.pokemon .tittle .btn-fav button {
  width: 100px;
  height: 100px;
  background-image: url("../media/pokeball.png");
  background-size: contain;
  background-color: transparent;
  border: none;
}

我在文件夹口袋妖怪和文件pokemon.js中,我正在尝试从文件夹媒体和img pokeball.png enter image description here中获取img
我采取了从互联网上的图像,它的工作,但使用从我的项目的img,不工作。肯定是错误的路径。

wa7juj8i

wa7juj8i1#

您需要先导入图像

import bgImg from '../media/pokeball.png';

然后使用bgImg变量

const [favStyleButton, setFavStyleButton] = useState({
    width: "100px",
    height: " 100px",
    backgroundImage: `url(${bgImg})`,
    backgroundSize: "contain",
    backgroundColor: "transparent",
    border: "none",
  });

相关问题