Javascript 如何在react.js/Styled组件中更改视图端口时动态更改图像 从“../Theme”导入{GlobalStyle}； 从“样式化组件”导入样式化； 从“../assets/images/about/mobile/image about hero.jpg”导入heroMobileImg； 从“../assets/images/about/mobile/image world class talent.jpg”导入worldClassTalentMobileImg； 从“../assets/images/about/mobile/image real deal.jpg”导入realDealMobileImg； 从“../assets/images/about/tablet/image about hero.jpg”导入heroTabletImg； 从“../assets/images/about/tablet/image world class talent.jpg”导入worldClassTalentTabletImg； 从“../assets/images/about/tablet/image real deal.jpg”导入realDealTabletImg； 从“../components/Header”导入标题； 从“../components/Footer”导入页脚； const StyledAboutPageContainer=styled.div` .关于横幅容器{ 身高：71.5雷姆； } .banner img{ 背景图像：url（${heroMobileImg}）； } @媒体屏幕和屏幕（最小宽度：800px）{ .banner img{ 背景图像：url（${heroTabletImg}）； } } `; 函数About（）{ 返回( ); } 导出默认值约为；

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

嗯，我觉得应该有更好的方法来做这种工作。我可以用下面的代码传递不同的图像名称

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;

let size=“”；
如果（窗内宽度<800）
size=“mobile”；
否则如果（window.innerWidth>800&&window.innerWidth如果您不需要支持IE，请检查此项

在排序中，您可以使用纯HTML进行排序

    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`)


您可以使用此库查看窗口更改，甚至创建自己的媒体查询侦听器，我还没有测试性能，也没有测试哪一个更好，但我认为这应该可以完成您在第二个代码段中想要做的事情。
<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>