无法在组件中使用语义 UI 反应添加背景图像

Question

我尝试使用内联 CSS 样式在我的应用程序中添加背景图像，但我无法添加语义 UI 反应组件和 div。

由 backgroundImage:url(${https://wallpapercave.com/wp/wp2449777.png}) 在我的 div 中使用 this 以及在 semantic-ui-react 中调用的组件尝试过

import React,{Component} from 'react';
import {Container,Image,Segment} from 'semantic-ui-react';
import Certificate from '../ethereum/certificate';
import web3 from '../ethereum/web3';


class certificateHere extends Component{
  static async getInitialProps(props){
  const numberofCertificates = await Certificate.methods.getCertificateCount().call();
  const recentCertificate = await Certificate.methods.certificates(numberofCertificates-1).call();
  return { numberofCertificates , recentCertificate};

  }




  render(){

 const { numberofCertificates , recentCertificate}= this.props;
    return (
      <div className='main'
      style={{

          textAlign:'center',
          backgroundImage:`url(${https://wallpapercave.com/wp/wp2449777.png})`
      }}
      >
<Segment >

<div className='sub'>
    <h1><b>Blockchain Certification</b></h1>
  <h3 >This is to certify that</h3><br/>
  <p><b>{recentCertificate.CandidateName} has successfully completed his {recentCertificate.CourseName} developer Program which<br/>
is of 14 hrs online course: Build projects using solidity on {recentCertificate.DateOfCompletion}.</b></p>
</div>
<Image src='' size='small' style={{ marginLeft: 'auto', marginRight: 'auto'}} />
<div style={{ position: 'absolute',
  bottom: '8px',
  left: '16px'}}
  >
<h4 className='issued'style={{textAlign:'left', textDecoration: 'underline'}}>Issued by:{recentCertificate.InstituteName}</h4>
<h4 className='location'style={{textAlign:'left',textDecoration: 'underline'}}>Location:{recentCertificate.Location}</h4>
</div>
<div style={{ position: 'absolute',
  bottom: '8px',
  right: '16px'}}>
  <h4 className='issuer'style={{textAlign:'right',textDecoration: 'underline'}}>Issuer Name:{recentCertificate.IssuerName}</h4></div>

  <style jsx>{`
        h1 {
          color: orange;
          font-style: oblique;
          font-size: 50px;
        }
        h3{
          font-size: 40px;
          color:orange;
          padding-top: 25px;

        }
        p{
          font-size: 20px;
          color: orange;
          padding:30px;
        }
        h4.issued{
          color: orange;
          padding-bottom: 25px;
}
h4.location{
  padding-bottom: 100px;

}
h4.issuer{
  padding-bottom: 100px;

}
.main{
  backgroundColor:green;
}
      `}</style>

</Segment>
</div>
);
  }
}

export default certificateHere;

我只想要这个组件的背景图片覆盖整个页面。

Answer 1

试试 backgroundImage: 'url(https://wallpapercave.com/wp/wp2449777.png)'