Reactjs 使用媒体查询响应内联背景图像

我正在开发一款反应灵敏的react应用程序。当视口缩小或增大时，“背景图像”应更改。我使用了内联样式，因为我无法使用到公用文件夹中的图像的相对路径

我已经在一个变量中创建了一个媒体查询，以响应它们应该更改的宽度

我已将该样式放在.Header flex潜水元素中

Header.js

const Header = () => {

    const media = {
        '@media (max-width: 650px)':{
            backgroundImage: 'url("starter-code/assets/mobile/bg-pattern-header.svg")' ,
        },
        '@media (min-width: 750px)':{
            backgroundImage: 'url("starter-code/assets/tablet/bg-pattern-header.svg")' ,
        }
    }

    

    return ( 
        <div className="header-wrapper">
            <main className="header-flex" style={media}>
                    <img src="starter-code/assets/desktop/logo.svg" alt="logo" className="logo-img"/>
                    <div class="space-around">
                        <img src="starter-code/assets/desktop/icon-sun.svg" alt="icon-sun" className="sun-img"/>
                        <label className="switch">
                            <input type="checkbox" />
                            <span className="slider"/>
                        </label>
                        <img src="starter-code/assets/desktop/icon-moon.svg" alt="icon-moon" className="moon-img"/>
                    </div>
            </main>
                <div className="input-search">
                    <img src="starter-code/assets/desktop/icon-search.svg" alt="icon-search" className="icon-search"/>
                    <input type="text" placeholder="Enter desired job..." className="enter-job"/>
                </div>

        </div>
     );
}
 
export default Header;

const头=（）=>{
常数媒体={
“@media（最大宽度：650px）”：{
背景图片：“url（“starter code/assets/mobile/bg pattern header.svg”），
},
“@介质（最小宽度：750px）”：{
背景图片：“url（“起始代码/assets/tablet/bg-pattern-header.svg”），
}
}
报税表（
);
}
导出默认标题；

媒体查询不能用作内联样式

但是，您可以使用此方法指定背景图像：

首先创建css样式，如下所示，并将其保存在名为css的变量中：

const css = `@media (max-width: 650px) {
    .backimage {
        background-image: url("https://picsum.photos/200/300")
    }
}
@media (min-width: 750px) {
    .backimage {
        background-image: url("https://picsum.photos/200");
    }
}`;

然后，在

main

标记上方的

style

标记中的组件中使用它：

<style scoped>{css}</style>
<main style={{ height: 300 }} className="backimage">

{css}

---

还请检查

请让我知道它是否适合您我们正在放置此样式的范围标签。我以前从未见过这样使用的。他们进入组件吗？是的，你应该在组件中使用它。我更新了答案并添加了一个沙盒链接。请检查它并告诉我它是否解决了你的问题。