使用媒体查询反应内联 BackgroundImage

Question

我正在开发一个响应式的 React 应用程序。当视口缩小或增加时，“背景图像”应该改变。我使用了内联样式，因为我无法使用公用文件夹中图像的相对路径。

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

我已将样式放在 .hearder-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;

Answer 1

好吧，媒体查询不能用作内联样式。

但是您可以使用这种方法来分配背景图像：

首先创建如下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">

请同时查看this sandbox link