Question

我有点挣扎于HTML5。我必须在网页上显示图像，但它不会显示。它显示为好像图像不存在。到目前为止，这是我的代码：

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

Answer 1

您使用字符串 "userPicture"作为网址，而不是该变量的内容。

您需要使用变量。

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

更好的方法是不将字符串拼接在一起形成HTML。这种错误很容易阅读，也很容易发生。

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)

图片不会在HTML网页上显示

1 个答案: