Question

我家中有一个Raspberry Pi，它显示来自RSS feed的文本。由于获取文本非常全面，因此没有问题。

但是，我想从另一个页面获取一些图像数据。我的ajax通话取得了成功，但这是显示的内容：

这是页面加载时正在打印到控制台的内容：

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7/:1 GET data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7/ 0 ()

以下是屏幕截图，因此您可以在上下文中查看它：

这是远程页面中的html：

<div class="actdesc">
    <img class="lazy" width="" height="" src="https://78.media.tumblr.com/74b6de04e00fbdd7f48a5c2924ce790b/tumblr_pbtgg8xBLS1qkvbwso1_500.png" data-original="https://78.media.tumblr.com/74b6de04e00fbdd7f48a5c2924ce790b/tumblr_pbtgg8xBLS1qkvbwso1_500.png" style="display: inline;"><br><br><p>If Earth’s entire history were 
compressed into a single year,  
modern humans would first appear  
on December 31 at about 11:00pm.  <a href="http://www.bbc.co.uk/nature/history_of_the_earth">Source</a> <a href="http://www.oum.ox.ac.uk/thezone/fossils/history/calendar.htm">Source 2</a> <a href="https://www.timetoast.com/timelines/63215">Source 3</a></p>

这是我的代码：

<!DOCTYPE html>
<?php
//TODO php stuff later
?>
<html>
<head>
    <title>Test Page</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/moment.min.js"></script>

    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="test_container" class="container">
    <!-- Image goes here -->
</div>
<div id="test_container_2" class="container">
    <!-- Example text will appear here -->
</div>

<script>
    $.ajax({
        url: 'https://www.feedspot.com/infiniterss.php?q=site:http%3A%2F%2Fdidyouknowblog.com%2Frss',
        type: 'GET',
        dataType: 'html', //is this the right data type?
        success: function(data) {
            console.log("Successful ajax call"); //Just to notify me it came back ok
            $(data).find('.actdesc img').each(function() {
                var img = $(this).eq(0).attr('src'); //Just trying to get the first one for now
                console.log(img); //Wanted to see what was coming back
                $('#test_container').html('<img src='+img+'/>'); //Trying to place the img in my div
            })
        }

    })
</script>
</body>
</html>

我能够得到很好的文字。我不太确定以这种方式获取图像。我发现了THIS个问题，但它要求一个特定的图像。这将稍后在setInterval函数中动态获取图像，因此为什么我尝试通过类名获取数据。

为验证我确实在获取文本，我在图像正下方抓住了

元素，并且操作成功：

这是我抓取它的方式：

var text = $(data).find('.actdesc p:first').text();
var substring = text.split('Source')[0];
console.log("Got substring from p element:\n" + substring);
$('#test_container_2').html('<p style=\"color:white;\">' + substring + '</p>');

类似这样的正确语法是什么，有人可以解释“ base64”行话在我的控制台中的含义吗？

谢谢。

更新我设法通过每个元素中称为“ data-original”的数据属性获取src字符串。我可以在控制台中打印它，它是一个可单击的链接，向我显示图像，但是，它仍在html中显示，与问题中的第一个屏幕截图相同。

第二次尝试：

var content = [];
    $.ajax({
        url: 'https://www.feedspot.com/infiniterss.php?q=site:http%3A%2F%2Fdidyouknowblog.com%2Frss',
        type: 'GET',
        dataType: 'html', //is this the right data type?
        success: function (data) {
            //console.log("All the data: " + data);
            console.log("Successful ajax call"); //Just to notify me it came back ok
            $(data).find('.actdesc').each(function () {
                var img = $(this).find('img').data('original'); //Get the data attribute instead
                //$('#test_container').html('<img src='+img+'/>'); //Trying to place the img in my div
                content.push(img);
            });

$('#test_container').html('<img src='+content[0]+'/>');

如果我将链接直接放在我自己的元素中，则控制台会给我一个403，因此我在这一点上非常棘手。

无法从远程Ajax请求获取图像

0 个答案: