Cannot get image from remote ajax request

Question

I have a Raspberry Pi in my house that displays text from an RSS feed. It has no problems since getting text was pretty comprehensive.

However, I would like to get some image data from another page. I'm getting success in my ajax call, but here is what is displaying:

Here is what is printing to my console upon page load:

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

Here's a screenshot so you can see it in context:

Here is the html from the remote page:

<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>

And here is my code:

<!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>

I am able to get text just fine. I'm very unsure about getting images in this way. I found THIS question, but it requests a specific image. This is going to get images dynamically within a setInterval function later, hence why I am attempting to get the data via class name.

To verify that I was indeed getting text, I grabbed the

element directly below the image, and it was successful:

And here is how I grabbed it:

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>');

What is the correct syntax for something like this, and can someone explain what the 'base64' jargon means in my console?

Thanks.

Update I managed to get the src string through a data attribute called "data-original" that is in every element. I can print it in the console, and it's a clickable link that shows me the image, however, it still displays in my html the same as the first screenshot in my question.

Second attempt:

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]+'/>');

If I place the link directly in my own element, my console gives me a 403, so I'm pretty stuck at this point.

Yeah, that's base64 encoding - it's using the data: url scheme, and is an alternate way of storing images to eliminate the number of requests from site visitors. They do this with CSS, and an example can be found here: https://stackoverflow.com/questions/1207190/embedding-base64-images -- Hope this helps. — Nerdi.org, Jul 15 '18 at 19:42
I just want this: src="https://78.media.tumblr.com/74b6de04e00fbdd7f48a5c2924ce790b/tumblr_pbtgg8xBLS1qkvbwso1_500.png — DevOpsSauce, Jul 15 '18 at 22:38

Cannot get image from remote ajax request

0 Answers0