画像はHTMLでWebページに表示されません

私は少しHTML5に苦労しています。ウェブページに画像を表示する必要がありますが、表示されません。イメージが存在しないかのように表示されます。これは、これまでの私のコードです：画像はHTMLでWebページに表示されません

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

あなたはURLではなく、その変数の内容として"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)

出典

2016-09-19 16:21:06 Quentin

はい、そうです。ルーキーミス！それほどありがとう！ –

"dadosPost"に物事を追加するこの新しい方法は、残念ながら動作しません。 NetBeansはエラーログにこれを表示します。「キャッチされないでSyntaxError：予期しない入力の終わり（14：02：21：094 |エラー、ジャバスクリプト）のpublic_html/index.htmlをで：60 は、リソースの読み込みに失敗しました：ネット:: ERR_EMPTY_RESPONSE （02：21：127 | error、network） http：// localhost：8383/favicon.ico > " –

ちょっと、私はばかだ。再度ありがとう：D –

画像はHTMLでWebページに表示されません

答えて

関連する問題