圖片將不會顯示在HTML網頁上

我正努力使用HTML5。我必須在網頁上顯示圖片，但它不會顯示。它顯示爲圖像不存在。這是到目前爲止我的代碼：圖片將不會顯示在HTML網頁上

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

來源

2016-09-19 Vinícius Oliveira Barros

您正在使用串"userPicture"的URL和該變量的不是內容。

您需要使用該變量。

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)

來源

2016-09-19 16:21:06 Quentin

是的，沒錯。菜鳥錯誤！對此感激不盡！ –

這種將事物附加到「dadosPost」的新方法不幸地不起作用。 netbeans在錯誤日誌中顯示：「Uncaught SyntaxError：意外的輸入結束（14：02：21：094 | error，javascript） at public_html/index.html：60 無法加載資源：net :: ERR_EMPTY_RESPONSE （14：02：21：127 |錯誤，網絡）在http：// localhost：8383/favicon.ico >「 –

嘿，我只是愚蠢。再次感謝：D –

圖片將不會顯示在HTML網頁上

回答

相關問題