在 react.js/Styled Component 中更改视口时如何动态更改图像

Question

import { GlobalStyle } from '../Theme';
import styled from 'styled-components';

import heroMobileImg from '../assets/images/about/mobile/image-about-hero.jpg';
import worldClassTalentMobileImg from '../assets/images/about/mobile/image-world-class-talent.jpg';
import realDealMobileImg from '../assets/images/about/mobile/image-real-deal.jpg';

import heroTabletImg from '../assets/images/about/tablet/image-about-hero.jpg';
import worldClassTalentTabletImg from '../assets/images/about/tablet/image-world-class-talent.jpg';
import realDealTabletImg from '../assets/images/about/tablet/image-real-deal.jpg';

import Header from '../components/Header';
import Footer from '../components/Footer';

const StyledAboutPageContainer = styled.div`
    .about-banner-container {
        height: 71.5rem;
    }
    .banner-img{
        background-image:url(${heroMobileImg});
    }

    @media screen and (min-width: 800px) {
        .banner-img{
        background-image:url(${heroTabletImg});
    }
    }
`;
function About() {
    return (
        <StyledAboutPageContainer>
            <GlobalStyle />
            <main>
                <Header />
                <div className="about-banner-container">
                    <div className="banner-img"/>
                </div>

                <Footer />
            </main>
        </StyledAboutPageContainer>
    );
}

export default About;

我有大约 5 个不同的图像需要在此页面中显示，每个图像都有手机、平板电脑和桌面尺寸。 这就是我目前正在做的，我先导入所有图像，然后使用媒体查询更改其背景图像。

好吧，我觉得有更好的方法来完成这种工作。 我可以使用以下代码传递不同的图像名称

    let size = "";
    if (window.innerWidth < 800)
             size="mobile";
    else if (window.innerWidth > 800 && window.innerWidth <= 1100)
             size="tablet";
    else 
         size="desktop";
    const curImg = require(`../assets/images/about/${size}/${name}.jpg`)

问题是当在不同的断点处更改大小时，我不知道如何让反应重新渲染图像。

Answer 1

如果你不需要支持 IE，检查这个Responsive_images

在某种程度上，您可以使用普通的 HTML 来完成

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>