CODEWITHSUNDEEP
htmlimage
Vinícius Oliveira Barros
Vinícius Oliveira Barros

Reputation: 1

Image won't show on the webpage with HTML

I'm struggling with HTML5 a bit. I have to display an image on a webpage, but it just won't show. It displays as if the image does not exist. This is my code so far:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="stylesSelecao.css" media="screen">
  <title>Twitter</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>



<body class="inner">
  <script>
    $(function() {
      var posts =  [{
    "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel odio vitae sapien commodo consectetur. Sed cursus velit nisl, eget posuere.",
    "date": "2014-09-20T01:52:32 +03:00",
    "likes": 696,
    "user": {
      "id": 0,
      "username": "edna",
      "location": "Woodlands, New Mexico",
      "picture": "http://www.graceweb.tv/fairview/wp-content/uploads/placeholder_girl.png",
      "bio": "Dolor aliqua nisi nisi culpa velit deserunt quis qui Lorem cillum dolor eiusmod adipisicing. Labore cupidatat mollit ullamco duis excepteur anim et enim do adipisicing id. Deserunt eiusmod magna cupidatat proident et.\r\n",
      "friends": 1
    }
  }          
];
      $.each(posts, function(i, f) {
        var userPicture = f.user.picture;
        var dadosPost = "<div>"+'<figure><img src="userPicture"/></figure>'+ "<h3>" + f.user.username + "</h3>" + f.date + f.content  +"</div>"        
        $(".inner").prepend(dadosPost)
      });
    });
  </script>



 </body>

  </html>

Upvotes: 0

Views: 132

Answers (1)

Quentin
Quentin

Reputation: 943571

You are using the string "userPicture" as the URL and not the contents of that variable.

You need to use the variable.

 var dadosPost = "<div>"+'<figure><img src="' + userPicture + '"/></figure>'+ "<h3>" + f.user.username + "</h3>" + f.date + f.content  +"</div>"

A better approach would be to not mash strings together to form HTML. It is hard to read and easy to make this kind of error.

var dadosPost = $("<div />");
var fig = $("<figure />");
var img = $("<img />")
             .attr("src", userPicture")
             .attr("alt", "Images should have alt text");
var heading = $("<h3>").text(f.user.username);
dadosPost.append(figure);
figure.append(img);
dadosPost.append(heading);
dadosPost.append(f.date);
dadosPost.append(f.content);
$(".inner").prepend(dadosPost)

Upvotes: 2

Related Questions