我正在投资组合网站上,在Bootstrap Carousel中显示其屏幕截图。
在React Development Server字幕中,渲染和正常运行:
npm run start
在生产版本中,阳离子采用HTML格式,但看不到呈现:
npm run build
serve -s build
<Carousel key= {'in-depth'+projectIndex} activeIndex={pageIndex} onSelect={(i,e)=>{setPageIndex(i); console.log('select-called'); forceUpdate();}} className='col-lg-8 col-md-10' style={{margin: '1.0rem auto',}}>
{projects[projectIndex].pages.map((page,i) =>
<Carousel.Item key={projects[projectIndex].pages[i].target+i+projects[projectIndex].title} interval={5000} style={{maxHeight: '75vh', overflowY: page.type == 'vertical-scroll' ? 'scroll' : 'hidden'}} class={i==0 ? 'active' : ''}>
{page.type == 'video' ?
<Player playing src={conceptVersion} height='420' width='720' controls={true} style={{margin: '0 auto', textAlign: 'center'}} className='project-image'/>
: <img className="d-block w-100 project-image" src={projects[projectIndex].pages[i].image} alt={projects[projectIndex].pages[i].target} />}
<h3 className='carousel-title' >{projects[projectIndex].title}</h3>
{page.type == 'vertical-scroll' ? <div></div>
: <div id='describe-box' className='carousel-description-box' style={{}}>
<p className='carousel-description' >{projects[projectIndex].pages[i].description}</p>
</div>}
</Carousel.Item>)}
</Carousel>
源代码:https : //github.com/ethanjohnsrud/portfolio/blob/main/src/Projects/Projects.jsx
实时网站:https : //5fd8f2548eaa992466b41f48--ethan-johnsrud-portfolio.netlify.app/
知道为什么会有区别,以及如何解决该问题?
由opacity: 1%;
-> 0%完全透明引起。在Projects.css中:.carousel-description块
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句