NodeJS 如何在react中插入背景图片？

9q78igpj 于 2023-08-04 发布在 Node.js

关注(0)|答案(2)|浏览(101)

我想插入一个image作为背景卡.我已经保存了image在public/img/login.png .该image不显示..我使用coreuiReact管理模板.这是我的代码：：

<CCard className="text-white bg-primary py-5 d-md-down-none " style={{ width: '44%' , backgroundImage: "url(/login.png)" }}>
  <CCardBody className="text-center ">
     <div>
        <h2>Sign up</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <Link to="/register">
          <CButton color="primary" className="mt-3" active tabIndex={-1}>Register</CButton>
        </Link>
      </div>
    </CCardBody>
</CCard>

字符串

node.js

来源：https://stackoverflow.com/questions/69723048/how-to-insert-backgroun-image-in-card-in-react

2条答案

按热度按时间

2ul0zpep1#

你已经在你的根文件夹中创建了一个assest文件夹，然后你可以在那里添加一个images文件夹，并获取相对路径并将其导入到背景图像url中。
导入图像

import Yourimage from '../images/background_image.png';

var imgStyle= {
  backgroundImage: `url(${Yourimage})`
};

class ImgComponent extends Component {
  render() {
    return (

      <div style={imgStyle}>
      </div>
    );
  }
}

字符串

赞(0）回复(0）举报 2023-08-04

uurv41yg2#

你可以添加一个图像元素。

import YourImage from "../images/image.jpg";

字符串
请确保首先导入图像。我把我的图像放在文件夹里，它很容易访问。在那之后，你只需要添加这个：

<img src={YourImage} className="card-imp-top" alt="..." />

型
或修改您的形象，无论你想！！

赞(0）回复(0）举报 2023-08-04

我来回答

NodeJS 如何在react中插入背景图片？

2条答案

相关问题

热门标签

最新问答