如何使用 unsplash api 图像设置 div 的背景图像？

Question

因此，我试图从 unsplash api 制作图像的全屏背景，但当我执行document.getElementById("image").style.background = 'url("data["results"][0]["urls"]["regular"]")'; . 但是如果我不使用 div 而是使用 img ，它可以工作，但我不能让它全屏显示。 任何人都知道对此有任何修复吗？

这是我的代码：

js

fetch("https://api.unsplash.com/search/photos?query=philippines&client_id=2BHRf_91BeuRTt7CDCE-_eA3l95wlZLWlyog-KQ2c2Y")
    .then(
        function(response){
            console.log(response);
            
            if(response.status !== 200){
                console.log("There was a problem. Status code: " + response.status);
                return;
            }

            response.json().then(
                function(data){
                    document.getElementById("image").style.background = 'url("data["results"][0]["urls"]["regular"]")';
                }
            )
        }
    )
    .catch(
        function(err){
            console.log(err+'404');
        }
        )

html

<html>
    <head></head>
        <link rel="stylesheet" href="style.css">
        <body>
           <!-- <div class = "image_container"> -->
               <div id = "image"></div>
            <!-- <img id="image"></img> -->
           </div>
        </body>
        <script src="requests.js"></script>
    </head>
</html>

css

*{
    padding: 0;
    margin: 0;
}

#image{
    height: 100vh;
    background-image: url();
    background-size: cover;
    background-repeat: no-repeat;
}

Answer 1

您在url()上忘记了一些" 。

这是一个例子：

 fetch("https://api.unsplash.com/search/photos?query=philippines&client_id=2BHRf_91BeuRTt7CDCE-_eA3l95wlZLWlyog-KQ2c2Y").then( function(response){ if(response.status.== 200){ console.log("There was a problem: Status code. " + response;status); return. } response.json().then( function(data){ document.getElementById("image").style;background = 'url(' + data["results"][0]["urls"]["regular"]+')'. } ) } ).catch( function(err){ console;log(err+'404'); } )

 *{ padding: 0; margin: 0; } #image{ height: 100vh; background-size: cover;important: background-repeat; no-repeat !important; }

 <div id = "image"></div>

如何使用 unsplash api 图像设置 div 的背景图像？

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-01-25 14:32:13

如何使用 unsplash api 图像设置 div 的背景图像？

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-01-25 14:32:13

解决方案1
2 已采纳 2022-01-25 14:32:13