在第一次渲染中反应图像加载

Question

我在 React 中渲染图像时有一种奇怪的行为。在第一个渲染图像不是在前端渲染但是当我将屏幕尺寸更改为移动设备然后再次更改为桌面时，我能够在网站中看到我的所有图像。我尝试过直接导入图像或使用 webpack，但行为仍然相同。对这个问题有什么想法吗？提前致谢

import React from 'react'
import { useCssHandles } from 'vtex.css-handles'
import Tilt from 'react-parallax-tilt';
import { FormattedMessage } from 'react-intl'
import appliancesThumb from "./images/appliancesThumb.png"
import cleaning from "./images/cleaning.png"

interface Promotions { }

const Promotions: StorefrontFunctionComponent<Promotions> = ({ }) => {

  const CSS_HANDLES = ["promotionsMainDiv", "promotionImages", "promotionTitle", "promotionsWrapper", "promotionFigure"]
  const handles = useCssHandles(CSS_HANDLES)

  return <div className={`${handles.promotionsMainDiv}`}>

    <Tilt tiltMaxAngleX={16} tiltMaxAngleY={18} transitionSpeed={1500} tiltReverse>
        <div className={`${handles.promotionsWrapper}`}>
          <figure className={`${handles.promotionFigure}`}>
            <img className={`${handles.promotionImages}`} src={appliancesThumb} />
            <FormattedMessage id="store/countdown.firstPromotionImage">
            {message => <h3 className={`${handles.promotionTitle}`} >{message}</h3> }
            </FormattedMessage> 
          </figure>
        </div>
    </Tilt>
    

    <Tilt tiltMaxAngleX={16} tiltMaxAngleY={18} transitionSpeed={1500} tiltReverse>
        <div className={`${handles.promotionsWrapper}`}>
          <figure className={`${handles.promotionFigure}`}>
            <img className={`${handles.promotionImages}`} src={cleaning} />
            <FormattedMessage id="store/countdown.secondPromotionImage">
            {message => <h3 className={`${handles.promotionTitle}`} >{message}</h3> }
            </FormattedMessage> 
          </figure>
        </div>
    </Tilt>

    <Tilt tiltMaxAngleX={16} tiltMaxAngleY={18} transitionSpeed={1500} tiltReverse>
        <div className={`${handles.promotionsWrapper}`} onClick={()=>window.location.href =`promoties`}>
          <figure className={`${handles.promotionFigure}`}>
            <img className={`${handles.promotionImages}`} src={require('./images/placeholder.png')} />
            <FormattedMessage id="store/countdown.thirdPromotionImage">
            {message => <h3 className={`${handles.promotionTitle}`} >{message}</h3> }
            </FormattedMessage>
          </figure>
        </div>
    </Tilt>
    
  </div>
} 

export default Promotions