Question

我正在尝试直接插入我最新的tumblr帖子图片作为我网站上div的背景图片。

我可以使用此代码添加图像src

<img border='0' style='margin:0' width='100%' id='TumblrMagic' src='' alt='' />
    <script type='text/javascript' src='http://myblog.tumblr.com/api/read/json?number=1&type=photo'></script>
    <script type='text/javascript'>
            document.getElementById('TumblrMagic').setAttribute('src', tumblr_api_read.posts[0]['photo-url-500']);
    /script>

但是出于风格原因，我希望能够把它作为div的背景图像。我正在挖掘这个

<div id="TumblrMagic"></div>
<script type='text/javascript'>
        document.getElementById('TumblrMagic').css('background-image', 'url(' + imageUrl + ')');
</script>

现在我正在尝试使用加载图片imageUrl的代码替换tumblr_api_read.posts[0]['photo-url-500']，但我不能流利使用javascript。有人可以帮我一把吗？

Answer 1

试试这个：

var imageUrl = tumblr_api_read.posts[0]['photo-url-500'];

Answer 2

将img元素附加到div：

<script type='text/javascript'>
    var div = document.getElementById('TumblrMagic');
    var image = document.createElement("img");
        image.src = tumblr_api_read.posts[0]['photo-url-500'];
    div.appendChild(image);
</script>

或将背景图像设置为div：

<script type='text/javascript'>
    var  image = tumblr_api_read.posts[0]['photo-url-500'];
    var div = document.getElementById('TumblrMagic');
        div.style.backgroundImage = 'url(' + image + ')';
        div.style.width = '100%'; //change it or apply by CSS
        div.style.height = '768px'; //change it or apply by CSS
    </script>

Javascript插入图像作为div背景

2 个答案: